在select2中使用AJAX进行标记
我正在做select2标记
我有这些要求与select2：
- 我需要使用select2 ajaxsearch一些标签
- 另外我需要在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
一些改进的例子：
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该结果作为标签。
