The Evernote Web Clipper extension for Chrome has a “lozenge” style button that is created for each Tag (Tag = word or phrase entry) you choose from an auto-complete drop-down list box. The lozenges are similar to the stack overflow Tag in that they look like small colored buttons with the Tag text in the center, and a little “x” in the upper right corner to delete the Tag. The difference is that Evernote uses a drop-down list box with auto-complete that rolls down from directly beneath where you are typing into the edit box that is accumulating your Tag choices. Therefore, as you select each tag you end up with a line of lozenges behind the entry your are currently entering. Clicking on a lozenge’s deletion mini-box removes the lozenge from the edit box.
It’s a pretty complex series of operations and to try duplicating it with one of the standard JQuery elements or a similar item would be a significant amount of work (especially the lozenge drawing and event handling for the delete mini-box). Is there a Javascript library that has this same function? If so, please tell me the name of the library (link if you have it) and what module or element is the one I need to study.
If you are referring to the image in the url (my reputation dont allow me to upload. :(), I believe there are some similar question with answers that points to the correct plugin.
Screenshot of Evernote Web Clipper: https://i.stack.imgur.com/cgK9A.png
If so, answers are available here: plugin to separate tags (like the stackoverflow's input tags interface)