Tagging with AJAX in select2

Select2 has the function "createSearchChoice":

Creates a new selectable choice from user's search term. Allows creation of choices not available via the query function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.

You could achieve what you want by using:

createSearchChoice:function(term, data) {  if ($(data).filter(function() {    return this.text.localeCompare(term)===0;  }).length===0) {    return {id:term, text:term};  }},multiple: true

Here's a more complete answer that returns a JSON result to an ajax search, and allows tags to be created from the term, if the term returned no results:

$(".select2").select2({  tags: true,  tokenSeparators: [",", " "],  createSearchChoice: function(term, data) {    if ($(data).filter(function() {      return this.text.localeCompare(term) === 0;    }).length === 0) {      return {        id: term,        text: term      };    }  },  multiple: true,  ajax: {    url: '/path/to/results.json',    dataType: "json",    data: function(term, page) {      return {        q: term      };    },    results: function(data, page) {      return {        results: data      };    }  }});

Select v4

http://jsfiddle.net/8qL47c1x/2/

HTML:

<select multiple="multiple" class="form-control" id="tags" style="width: 400px;">    <option value="tag1">tag1</option>    <option value="tag2">tag2</option></select>

JavaScript:

$('#tags').select2({    tags: true,    tokenSeparators: [','],    ajax: {        url: 'https://api.myjson.com/bins/444cr',        dataType: 'json',        processResults: function(data) {          return {            results: data          }        }    },    // Some nice improvements:    // max tags is 3    maximumSelectionLength: 3,    // add "(new tag)" for new tags    createTag: function (params) {      var term = $.trim(params.term);      if (term === '') {        return null;      }      return {        id: term,        text: term + ' (new tag)'      };    },});

Select v3.5.2

Example with some improvements:

http://jsfiddle.net/X6V2s/66/

html:

<input type="hidden" id="tags" value="tag1,tag2" style="width: 400px;">

js:

$('#tags').select2({    tags: true,    tokenSeparators: [','],    createSearchChoice: function (term) {        return {            id: $.trim(term),            text: $.trim(term) + ' (new tag)'        };    },    ajax: {        url: 'https://api.myjson.com/bins/444cr',        dataType: 'json',        data: function(term, page) {            return {                q: term            };        },        results: function(data, page) {            return {                results: data            };        }    },    // Take default tags from the input value    initSelection: function (element, callback) {        var data = [];        function splitVal(string, separator) {            var val, i, l;            if (string === null || string.length < 1) return [];            val = string.split(separator);            for (i = 0, l = val.length; i < l; i = i + 1) val[i] = $.trim(val[i]);            return val;        }        $(splitVal(element.val(), ",")).each(function () {            data.push({                id: this,                text: this            });        });        callback(data);    },    // Some nice improvements:    // max tags is 3    maximumSelectionSize: 3,    // override message for max tags    formatSelectionTooBig: function (limit) {        return "Max tags is only " + limit;    }});

JSON:

[  {    "id": "tag1",    "text": "tag1"  },  {    "id": "tag2",    "text": "tag2"  },  {    "id": "tag3",    "text": "tag3"  },  {    "id": "tag4",    "text": "tag4"  }]

UPDATED 2015-01-22:

Fix jsfiddle: http://jsfiddle.net/X6V2s/66/

UPDATED 2015-09-09:

With Select2 v4.0.0+ it became easier.

Select v4.0.0

https://jsfiddle.net/59Lbxvyc/

HTML:

<select class="tags-select" multiple="multiple" style="width: 300px;">  <option value="tag1" selected="selected">tag1</option>  <option value="tag2" selected="selected">tag2</option></select>

JS:

$(".tags-select").select2({  // enable tagging  tags: true,  // loading remote data  // see https://select2.github.io/options.html#ajax  ajax: {    url: "https://api.myjson.com/bins/444cr",    processResults: function (data, page) {      return {        results: data      };    }  }});

createSearchChoice : function (term) { return {id: term, text: term}; }

just add this option item