Add delete icons to each word in text input field

[waseber]

I’ve seen this only a few times (can’t think of an example, sorry).
Say you perform a search with a few key words e.g. “Hello World”, in the search results page, in the input field, how do you attach a delete “x” to each word? E.g. “Hello x” “World x” (with a box border around each word).
All I have found is how to add an X to the field to delete all words, this feature would be to delete individual words.
Thanks in advance!

[rkieru]

The mechanism to which you are referring is called “Token Input” and there are quite an array of JavaScript solutions. Here are two jQuery solutions to get you started:

jQuery Tokeninput
A jQuery Tokenizing Autocomplete Text Entry
http://loopj.com/jquery-tokeninput/

Tokenfield for Bootstrap
Advanced tagging/tokenizing plugin for jQuery and Twitter Bootstrap with a focus on keyboard and copy-paste support.
http://sliptree.github.io/bootstrap-tokenfield/

Keep in mind that Token Inputs require some sort of dataset from which to pull results. If your goal is to use this for a keyword search it may be a bit too niche.

[Author]

Posts