How to add tags inside Text Area?

Question

I am designing a HTML form in which I want to add different places of the city. First I am going to select the city from the drop down list, then under that city I need to add different place names.

In my form I want to use Tags similar to those which are used while composing Emails in Gmail, where multiple Emails can be added. Any word seperated by comma should appear to be as a tag.

On Submit, each place name must be stored as a different value under the feild "Places" in the database.

Answer 1

Without rewriting an entire plugin, I'll just give you the basics on how something like this typically works.

The box isn't a textarea, it's a div. Inside the div there's first an input with no border or background; it's basically invisible. After typing in the input, the function would either listen for a tab key or comma character (just using comma below). If it gets one of those triggers, it takes the value of the input, wraps it in a button (or some other inline element like a span), and prepends it inside the div. Finally, it clears the input. I'm using a button here because you should also be able to remove the element.

Using jQuery just to make things easier.

$('#textarea input').on('keyup', function(e){
   var key = e.which;
   if(key == 188){
      $('<button/>').text($(this).val().slice(0, -1)).insertBefore($(this));
      $(this).val('').focus();
   };
});

$('#textarea').on('click', 'button', function(e){
   e.preventDefault();
  $(this).remove();
   return false;
})

#textarea{
  border:1px solid #eee;
}

#textarea input{
  border:none;
  background:none;
  font-size:1.2em;
  padding:6px;
}

#textarea input:focus{
   outline:none;
}

#textarea button{
   border:1px solid #eee;
   background:#f5f5f5;
  margin:4px;
  font-size:1.2em;
  cursor:pointer;
}

#textarea button:after{
   content:"\d7";
   color:red;
   margin-left:2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="textarea"><input type="text"/></div>