【问题标题】：Select2 Ajax Method Not SelectingSelect2 Ajax 方法未选择
【发布时间】：2013-01-27 00:15:19
【问题描述】：

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

所以我尝试使用Select2 AJAX 方法作为用户搜索数据库并选择结果的一种方式。呼叫本身会返回结果，但是它不允许我从列表中选择答案。它似乎也不允许您在悬停或向上/向下箭头时“选择”它。所以事不宜迟，这是我的代码：

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'
    }
  ]
}

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

【问题讨论】：

经过进一步调查，当我将下拉类从 select2-result-unselectable 更改为 select2-result-selectable 时，一切似乎都正常工作。
我会避免使用类进行 jquery 调用，而是使用 id。 $('#thisSelect').select2({......
@ganders 我不知道这有什么关系。
如果您碰巧在同一个表单/页面上使用了这些 select2 实现中的 2 个，那么输入一个会将结果放在两者中。类被设计为允许重复使用，而 id 应该是单一用途的。

标签： javascript jquery ajax jquery-select2 jquery-select2-3

【解决方案1】：

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

【讨论】：

非常感谢您的回答！巨大的，巨大的帮助！我没有收到任何错误，我所经历的一切都表明它应该可以工作。
@MikeHomol 没问题，我很高兴这个问题帮助了社区中的这么多人。很惊讶这是一个如此普遍的问题！
谢谢。小注意，当提交表单时，字段值将是字符串“object[Object]”。将“return {id: bond._id}”替换为“return bond._id”，一切又恢复了阳光......
@BogdanG 哦，这确实是正确的。我没有意识到我在这个答案中错了。我会更新的！
不幸的是，这在 Select2 4.0 中不再起作用。您需要代码 here 才能使其工作。

【解决方案2】：

问题是 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 }

        });

【讨论】：

select2 中的 ID 选项似乎在较新版本中不起作用，如果您使用 16 年 5 月的最新版本，请遵循此解决方案。

【解决方案3】：

还要小心这个案子。我使用的是Id，但 select2 需要id。可以节省别人的时间。

【讨论】：

【解决方案4】：

就像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
});

【讨论】：

【解决方案5】：

我有很多关于以下错误的问题 Select2 不允许使用选项 'ajax'

在我的情况下，当您使用 select2 3.5 版时出现选择，所以你应该升级到 4.0 版，你不需要隐藏输入附加到你的选择

【讨论】：

【解决方案6】：

您可以通过以编程方式打开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）选择一个选项时，似乎在幕后，一个选项元素被添加到选择元素中。您会注意到，当页面首次加载时，select2 选择元素没有任何 option 子元素。这就是为什么其他解决方案建议使用 jQuery 添加选项元素然后选择它的原因。

【讨论】：

【解决方案7】：

我将select2 绑定到div，不知何故不适用于ajax as dataSource 这样可能会对某人有所帮助。

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

改成

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

它开始保留选定的项目。

【讨论】：