Input field for Tags separated by comma
Put a text input within a div, then check for keypresses (such as the comma or space key), if it matches the key append a new span with the tag details to the div with jQuery.
I can provide more detail or an example if needed but it should be fairly straightforward to code.
Something similar like Stack Overflow does:
- Allows alphanumeric and
+-.#
(and trims whitespaces!) - Convert to lowercase
- Create automatically the Tag Box on focusOut Enter , (add more delimited by
|
pipe) - Delete Tag on click
jQuery($ => { // DOM ready and $ alias in scope.
// TAGS BOX
$("#tags input").on({
focusout() {
var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
this.value = "";
},
keyup(ev) {
if(/(,|Enter)/.test(ev.key)) $(this).focusout();
}
});
$("#tags").on("click", "span", function() {
$(this).remove();
});
});
#tags{
float:left;
border:1px solid #ccc;
padding:5px;
font-family:Arial;
}
#tags > span{
cursor:pointer;
display:block;
float:left;
color:#fff;
background:#789;
padding:5px;
padding-right:25px;
margin:4px;
}
#tags > span:hover{
opacity:0.7;
}
#tags > span:after{
position:absolute;
content:"×";
border:1px solid;
padding:2px 5px;
margin-left:3px;
font-size:11px;
}
#tags > input{
background:#eee;
border:0;
margin:4px;
padding:7px;
width:auto;
}
<div id="tags">
<span>php</span>
<span>c++</span>
<span>jquery</span>
<input type="text" value="" placeholder="Add a tag" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Use "Tagging Support" in select2 lists: https://select2.github.io/examples.html
$(".js-example-tags").select2({
tags: true
})
You don't necessarily need to reinvent the wheel here. A number of libraries/plugins for this purpose already exist, one of which is Guillermo Rauch's TextboxList. You can find a demonstration here. It already has autocomplete support and a pretty extensive API, which is what the major hurdles in any implementation of this are going to be.
The original implementation used MooTools, but you can find a jQuery version by golive here.