Badge with remove button inside input field like stackoverflow

Question

I want to create an input field that is very similar to stackoverflow's input field for tags. When I write a word then press space it is transformed into some kind of a badge with a remove button in it.

Is there an jQuery, jQuery-UI component for doing that? Or any other simple way? How can I replicate that? Or what is this kind of component called?

enter image description here

There's a list of plugins like that available at : http://stackoverflow.com/questions/519107/jquery-autocomplete-tagging-plug-in-like-stackoverflows-input-tags — Nemesis02, Dec 03 '13 at 17:10

score 2 · Accepted Answer · answered Dec 03 '13 at 17:25

2

jQuery Tags Input might be what you want.

answered Dec 03 '13 at 17:25

Aidas Bendoraitis

3,875
1
30
43

score 1 · Answer 2 · answered Dec 03 '13 at 17:05

1

May I suggest a jQuery plugin TokenInput?

answered Dec 03 '13 at 17:05

tedwards947

379
1
9

score 1 · Answer 3 · answered Dec 03 '13 at 17:14

TokenInput is a good plugin. Also see this JSFiddle YUI demo http://jsfiddle.net/Zh4rG/

YUI().use('autocomplete', 'autocomplete-highlighters', 'gallery-node-tokeninput', function (Y) {
  Y.one('#ac-input').plug(Y.Plugin.TokenInput).plug(Y.Plugin.AutoComplete, {
    resultHighlighter: 'phraseMatch',
    resultListLocator: 'users',
    resultTextLocator: 'id',
    resultFormatter: function(query, results) {
       return Y.Array.map(results, function (result) {
          return result.raw.username;
       });
    },
    source: 'http://github.com/api/v2/json/user/search/{query}?callback={callback}'
  });

  Y.one("#btn").on("click", function(e) {
    var node = Y.one('#ac-input');
    alert(node.get("value")); 
  });
});

Badge with remove button inside input field like stackoverflow

3 Answers3