在 select2中使用 AJAX 标记

我在用 精选2做标记

我对 select2有以下要求:

  1. 我需要使用 select2 ajax 搜索一些标记
  2. 我还需要在 select2中使用“ tag”，它允许列表中没有的值(Ajax 结果)。

这两种情况各自独立工作。但是组合在一起的 aJax 值只是填充的。如果我们输入任何其他值不在列表中，那么它说“没有找到匹配”

我的场景如果用户键入任何不在列表中的新值，允许他们创建自己的标记。

有什么办法吗？

47703 次浏览
小开

您可以通过让 ajax 函数返回搜索词作为结果列表中的第一个结果来实现这一点。然后用户可以选择该结果作为标记。

小开
最佳答案

Select2具有“ createSearchChoice”功能:

从用户的搜索词创建一个新的可选择的选项 创建通过查询函数不可用的选项 用户可以在运行中创建选项(如用于“标记”用例)。

你可以通过使用以下方法来实现你想要的:

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

下面是一个更完整的答案，它返回一个 JSON 结果到一个 ajax 搜索，并允许从这个术语创建标记，如果这个术语没有返回结果:

$(".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
};
}
}
});
小开 
createSearchChoice : function (term) { return {id: term, text: term}; }

只需添加此选项项

小开

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

选择 v3.5.2

例如一些改进:

Http://jsfiddle.net/x6v2s/66/

Html:

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

约翰逊:

$('#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;
}
});

杰森:

[
{
"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:

在 Select2v4.0.0 + 中，它变得更容易了。

选择 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>

约翰逊:

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

提交答案