Come creare una casella di testo con tag

Question

In stackoverflow possiamo vedere una casella di testo 'Tag' quando facciamo un post.

Digitando una parola e uno spazio diventa un tag. Dopo essere diventato un tag, contiamo di eliminare una lettera da una parola. Ma possiamo cancellare la parola stessa facendo clic sull'immagine X.

Voglio creare una casella di testo simile per i tag. Nello stackoverflow è presente anche un suggerimento automatico associato a questa casella di testo, ma non è necessario.

Qualsiasi aiuto/link sarà apprezzato

Answer 1

ci sono tutta una serie di questi online. Ho trovato alcuni usando Google abbastanza facilmente. Dai un'occhiata a questo uno per esempio:

http://xoxco.com/projects/code/tagsinput/

Answer 2

Edit: Ecco un esempio simile, con un po 'diverso (migliore) funzionalità:
https://stackoverflow.com/a/14083331/383904

---

Un bel piccolo demo può facilmente aggiornare e modificare:

$('#tags input').on('focusout',function(){  
 
    var txt = $.trim(this.value); 
 
    if(txt) { 
 
    $(this).before('<span class="tag">'+txt+'</span>'); 
 
    } 
 
    this.value = ""; 
 
}); 
 

 

 
$('#tags').on('click','.tag',function(){ 
 
    if(confirm("Really delete this tag?")) $(this).remove(); 
 
});

#tags{ 
 
    float:left; 
 
    border:1px solid #ccc; 
 
    padding:5px; 
 
    font-family:Arial; 
 
} 
 
#tags span.tag{ 
 
    display:block; 
 
    float:left; 
 
    color:#fff; 
 
    background:#689; 
 
    padding:5px; 
 
    padding-right:25px; 
 
    margin:4px; 
 
} 
 
#tags span.tag:after{ 
 
    position:absolute; 
 
    content:"x"; 
 
    border:1px solid; 
 
    padding:0 4px; 
 
    margin:3px 0 10px 5px; 
 
    cursor:pointer; 
 
    font-size:10px; 
 
} 
 
#tags input{ 
 
    background:#eee; 
 
    border:0; 
 
    margin:4px; 
 
    padding:7px; 
 
    width:auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tags"> 
 
    <input type="text" value="" placeholder="Add a tag" /> 
 
</div>