javascript - How do I transform a word in a html textbox to a "tag" with jQuery? -

i want program fancy searchbox. everytime when type word , press spacebar, word should transformed "tag". "tag" mean following:

the tags can see here profile settings stackoverflow. here, tag created pressing "add"-button. want word become tag not pressing button, everytime press spacebar.

do have solutions problem?

i've searched long time in google, haven't found anything!

thank help!

:d

https://jsfiddle.net/geop94u7/

somewhat robust, can packaged re-use consideration (scoping, multi-instance, etc.).

first, markup:

<div id="tags" class="cf"></div> <input type="text" id="tagname" /> 

then js, preventing duplicates, , allowing removal of selected tags (which can re-selected then).

$('#tagname').keypress(function(e) {     var $t = $(e.target),         tmap = $t.data('tmap') || {},         n = e.keycode || e.which,         val;     $t.data('tmap', tmap);      if (n === 32) {         val = $.trim($t.val());         if (val !== '' && tmap[val] === undefined) {             tmap[val] = 1;             $('#tags').append($('<div>').addclass('tag').html(val));             $t.val('');         }     } });  $('#tags').on('click', '.tag', function(e) {     var $t = $(e.target);     txt = $.trim($t.text());     $t.remove();     delete $('#tagname').data('tmap')[txt]; }); 

lastly, run of mill css delete indicator:

#tags {     width: 100%;     padding: 10px;     float: none;     clear: both; }  .tag {     float: left;     margin: 5px;     padding: 5px;     background: #efefef;     cursor: pointer;     border: 1px solid #e0e0e0; }  .tag::after {     content: '\2612';     float: right;     display: block;     margin: -2px 0 0 10px; } 

you're better off using robust plugin (there quite few) if rebuilding scratch isn't mandate.