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 posing Emails in Gmail, where multiple Emails can be added. Any word seperated by ma 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.
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 posing Emails in Gmail, where multiple Emails can be added. Any word seperated by ma 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.
Share Improve this question edited Dec 28, 2015 at 11:03 david strachan 7,2282 gold badges25 silver badges33 bronze badges asked Dec 28, 2015 at 7:10 K-InfectedK-Infected 751 silver badge9 bronze badges 2- 1 You can use <div contenteditable="true"></div> – Rajan Singh Commented Dec 28, 2015 at 7:12
- use selectize.js for tag – Mayank Vadiya Commented Dec 28, 2015 at 7:14
3 Answers
Reset to default 10Without 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 ma character (just using ma 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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="textarea"><input type="text"/></div>
Whilst I've personally never had to implement tags, my advice would have been to scour the internet to find something similar to what you are trying to achieve, and try to mimic their code and learn from that.
Fortunately, I've found one for you to potentially save you the time, it uses JavaScript to actually create the tags whenever you use a ma.
http://sean.is/poppin/tags
Source code appears to be available on Git and may provide the answers you're looking for, without me having to do this part for you!
Best of luck with this!
I think its best to use some plugin like tag it. https://github./aehlke/tag-it
Just check the demo.