小开

最佳答案

在查看另一个答案之后，似乎我还需要在每次调用时传递 id 字段，否则它将禁用输入。

修复它的示例代码:

$('.select2').select2({
placeholder: "Policy Name",
minimumInputLength: 3,
multiple: false,
quietMillis: 100,
id: function(bond){ return bond._id; },
ajax: {
url: "http://localhost:3000/search",
dataType: 'json',
type: 'POST',
data: function(term, page) {
return {
search: term,
page: page || 1
}
},
results: function(bond, page) {
return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)}
}
},
formatResult: formatResult,
formatSelection: formatSelection,
initSelection: initSelection
})

剪辑

既然这个问题不断得到投票支持，我将详细说明一下。那个。Select2()方法期望所有结果都有唯一的 id字段。谢天谢地，还有个解决办法。id选项接受如下函数:

function( <INDIVIDUAL_RESULT> ) {
// Expects you to return a unique identifier.
// Ideally this should be from the results of the $.ajax() call.
}

因为我的唯一标识符是 <RESULT>._id，所以我只是 return <RESULT>._id;

小开

还要小心的情况下。我使用的是 Id，但 select2期望 id。可以节省某人的时间。

小开

关于以下错误，我有许多问题 选项‘ ajax’不允许用于 Select2

在我的例子中，当您使用 select2版本3.5时，出现 for select, 所以你应该升级到4.0版本，你不需要隐藏的输入附加到你的选择

小开

问题是 JSON 数据需要一个名为“ id”的属性

函数(bond){返回 bond. _ id; }

如果数据本身没有 id，您可以在结果上添加一个函数，如下所示。

        $(YOUR FIELD).select2({
placeholder: "Start typing...",
ajax: {
type: "POST",
contentType: "application/json; charset=utf-8",
url: "YOUR API ENDPOINT",
dataType: 'json',
data:
function (params) {
return JSON.stringify({ username: params.term });
},
processResults: function (data, page) {


var results = [];


$.each(JSON.parse(data.d), function (i, v) {
var o = {};
o.id = v.key;
o.name = v.displayName;
o.value = v.key;
results.push(o);
})


return {
results: results
};
},
cache: true
},
escapeMarkup: function (markup) { return markup;},
minimumInputLength: 1,
templateResult: function (people) {
if (people.loading)
return people.text;


var markup = '<option value="' + people.value + '">' + people.name + '</option>';


return markup;
},
templateSelection: function (people) { return people.value || people.text }


});

小开

就像卡布里卡说的: 每个结果项都需要一个唯一的 id。

因此，只要给每个结果 id分配一个唯一的数字:

$('#searchDriver').select2({
ajax: {
dataType: 'json',
delay: 250,
cache: true,
url: '/users/search',
processResults: function (data, params) {
//data is an array of results
data.forEach(function (d, i) {
//Just assign a unique number or your own unique id
d.id = i; // or e.id = e.userId;
})


return {
results: data
};
},
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: formatRepo,
templateSelection: formatRepoSelection
});

小开

通过以编程方式打开 select2元素，然后触发 return按键，可以触发选择选项(在本例中是第一个)。

var e = jQuery.Event('keydown');
e.which = 13;


$('.offer_checkout_page_link select').select2('open');
$('.offer_checkout_page_link .select2-selection').trigger(e);

这将“设置”选项，就像你点击它一样。在触发 return键之前，您可以通过触发适当数量的 down键来修改这个选项，从而选择一个特定的选项。

当您单击(或者在本例中单击 enter)选择一个选项时，似乎在引擎盖下面添加了一个选项元素到 select 元素中。您将注意到，当页面第一次加载 select2时，select 元素没有任何 option元素子元素。这就是为什么其他解决方案建议使用 jQuery 添加选项元素，然后选择它。

小开

我把 select2和 div绑在一起，不知为什么 ajax as dataSource不起作用所以可能会有帮助。

<div id="testSelect2"> </div>

把这个改成

<select id="testSelect2"> </select>

然后它开始保留选中的项目。

Select2 Ajax 方法未选择

Html

Select.js

JSON 响应

剪辑