Select2 Ajax方法不select
好吧，我确定这里有一些简单的设置错误，但我不是100％。
所以我正在尝试使用Select2 AJAX方法作为用户search数据库并select结果的一种方式。 呼叫本身回来的结果，但它不会允许我从列表中select答案。 它也似乎不允许你“hover”或上/下箭头“select”。 所以，不要紧张，这是我的代码：
的index.html
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="select2/select2.css" media="screen" /> <script src="select2/select2.js"></script> <script src="select.js"></script> </head> <body> <input type="text" style="width: 500px" class="select2"> </body> </html> select.js
jQuery(function() { var formatSelection = function(bond) { console.log(bond) return bond.name } var formatResult = function(bond) { return '<div class="select2-user-result">' + bond.name + '</div>' } var initSelection = function(elem, cb) { console.log(elem) return elem } $('.select2').select2({ placeholder: "Policy Name", minimumInputLength: 3, multiple: false, quietMillis: 100, 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 }) })
JSON响应
{ error: null, results: [ { name: 'Some Name', _id: 'Some Id' }, { name: 'Some Name', _id: 'Some Id' } ] }
似乎一切正常，但是我无法真正select答案，并将其input到框中。 在我的代码中有什么问题吗？
看了另一个答案后 ，似乎我需要在每次调用时都传递id字段，否则会禁用input。
解决它的示例代码：
$('.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 })
编辑
由于这一直得到upvoted我会详细阐述一下。 .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;
问题是JSON数据需要一个名为“id”的属性。 没有必要
id：function（bond）{return bond._id; }
如果数据本身没有id，那么可以在processResults上像这里一样添加一个函数。
$(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但select2预计id 。 可以节省一些人的时间。
像Dropped.on.Caprica说：每个结果项目都需要一个唯一的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 });
我有很多关于以下错误的问题选项'ajax'不允许用于Select2
在我的情况下，当你使用select2版本3.5时出现select，所以你应该升级到4.0版本，你不需要隐藏的input附加到您的select
您可以通过以编程方式打开select2元素然后触发一个return键来触发select一个选项（在本例中为第一个选项）。
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按键来select特定的选项。
当你点击（或者在这种情况下点击enter ）来select一个选项时，看起来就好像在引擎盖下，一个选项元素被添加到select元素。 您会注意到，当页面第一次加载select2select元素没有任何option元素子元素。 这就是为什么其他解决schemebuild议使用jQuery添加一个选项元素，然后select它。
