Tagging with AJAX in select2

问题:

I am doing tagging with select2

I have these requirements with select2:

1. I need to search some tags using select2 ajax
2. Also I need to use "tags" in select2 which Allows values that are not in the list(Ajax result).

Both the scenarios work independently. But joined together aJax values are only populated. If we type any other values not in the list then it says "no matches found"

My scenario If user type any new value which is not in the list, allow them to make up their own tag.

Any way to make this work?

回答1:

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       };     }   } }); 

回答2:

Select v4

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

HTML:

tag1tag2

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:

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 

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:

tag1tag2

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       };     }   } }); 

回答3:

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

just add this option item

回答4:

You can make this work, by having your ajax function also return the search term, as the first result in the result list. The user can then select that result as a tag.

文章来源: Tagging with AJAX in select2