在select2中使用AJAX进行标记

我正在做select2标记

我有这些要求与select2:

  1. 我需要使用select2 ajaxsearch一些标签
  2. 另外我需要在select2中使用“标签”,它允许不在列表中的值(Ajax结果)。

两个场景都是独立运作的。 但join一个Ajax值只是填充。 如果我们input任何其他值不在列表中,则表示“找不到匹配”

我的场景如果用户input任何不在列表中的新值,则允许他们组成自己的标签。

任何方式来使这项工作?

Select2具有“createSearchChoice”function:

从用户的search词中创build一个新的可select的选项。 允许通过查询function创build不可用的选项。 当用户可以快速创buildselect时,例如“标记”用例,这是有用的。

你可以通过使用以下方法达到你想要的效果

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

下面是一个更完整的答案,它将JSON结果返回给ajaxsearch,并允许从术语创build标签,如果术语没有返回结果:

 $(".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 }; } } }); 

selectv4

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

selectv3.5.2

一些改进的例子:

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" } ] 

更新2015-01-22:

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

2015-09-09更新:

使用Select2 v4.0.0 +变得更容易。

selectv4.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}; } 

只需添加这个选项

您可以通过让您的ajax函数返回search词作为结果列表中的第一个结果。 用户然后可以select该结果作为标签。