Javascript Select2 Ajax方法不选择

好的，我肯定这里有一些简单的设置错误，但我不是100%的

所以我尝试使用AJAX方法作为用户搜索数据库和选择结果的一种方式。电话本身将返回结果，但它不允许我从列表中选择答案。它似乎也不允许您在悬停或向上/向下箭头上“选择”它。不用多说，下面是我的代码：

index.html 一切似乎都正确，但我无法实际选择答案并将其输入框中。我的代码中有问题吗？

查看后，我似乎还需要在每次调用时传递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. 
}

函数（）{
//期望您返回唯一标识符。
//理想情况下，这应该来自$.ajax（）调用的结果。
}

---

因为我的唯一标识符是

。\u id

，所以我只需

返回
也要小心箱子。我使用的是
Id
，但选择2需要
Id
。可以节省某人的时间。
关于以下错误，我有很多问题
Select2不允许使用“ajax”选项

在我的情况下，当您使用select2 3.5版时，会出现select，
因此，您应该升级到4.0版，并且不需要将隐藏的输入附加到select上。问题是JSON数据需要一个名为“id”的属性。没有必要这样做

id:function（bond）{return bond.\u 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 }

        });    

$（您的字段）。选择2({
占位符：“开始键入…”，
阿贾克斯：{
类型：“POST”，
contentType:“应用程序/json；字符集=utf-8”，
url:“您的API端点”，
数据类型：“json”，
数据：
函数（参数）{
返回JSON.stringify（{username:params.term}）；
},
processResults：函数（数据，页面）{
var结果=[]；
$.each（JSON.parse（data.d）、函数（i、v）{
var o={}；
o、 id=v.key；
o、 name=v.displayName；
o、 value=v.key；
结果：推（o）；
})
返回{
结果：结果
};
},
缓存：真
},
escapeMarkup:函数（标记）{return markup；}，
最小输入长度：1，
templateResult：功能（人员）{
如果（人员加载）
返回people.text；
var标记=“”+people.name+“”；
返回标记；
},
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);

这将“设置”选项，就像您单击它一样。在触发
返回键之前，您可以通过触发适当数量的
向下键
来修改此选项以选择特定选项

当你点击（或者在本例中点击
enter
）选择一个选项时，一个选项元素似乎被添加到了选择元素中。您会注意到，当页面首次加载
select2
select元素时，没有任何
选项
元素子元素。这就是为什么其他解决方案建议使用jQuery添加一个选项元素，然后选择它。
我将
select2
绑定到一个
div
，不知何故，这在
ajax作为数据源时不起作用
所以这可能会对某人有所帮助

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



将此更改为

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



它开始保留所选项目。
进一步调查后，当我将下拉类从select2 result unselectable更改为select2 result selectable时，一切似乎都正常工作。我会避免使用类调用jquery，而是使用id$（“#thisSelect”）。选择2({……@ganders我不知道这有什么关系。如果你碰巧在同一个表单/页面上使用了这两个select2实现中的两个，那么输入一个就会将结果放在两个表单/页面中。类的设计允许重复使用，而ID应该是单一用途的。非常感谢你的回答！巨大的帮助！我没有得到任何帮助g任何错误和我所经历的一切都表明它应该工作。@MikeHomol不是问题，我很高兴这个问题帮助了社区中这么多人。很惊讶这是一个如此普遍的问题！谢谢。小提示，当表单提交时，字段值将是字符串“object[object]”。替换为“return”{id:bond.\u id}”与“return bond.\u id”一切又开始晴朗起来了…@BogdanG Ohhh，这的确是正确的。我没有意识到我在这个答案中有错。我会更新！很遗憾，这在Select2 4.0中不再有效。你需要代码来让它工作。Select2中的ID选项在新版本中似乎不起作用，如果你使用的是最新版本，请遵循此解决方案2016年5月16日的st版本。
var e = jQuery.Event('keydown');
e.which = 13;

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

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

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