修改

Question

好的，我确定这里有一些简单的错误，但我不是百分之百。

所以我尝试使用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'
    }
  ]
}

似乎所有东西都正确拉入，但是我无法真正选择答案并将其输入到框中。我的代码中某处有问题吗？

Answer 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;

Answer 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 } });

Answer 3

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

Answer 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
});

Answer 5

关于以下错误我有很多问题 Select2

不允许选项'ajax'

在我的情况下，当您使用select2版本3.5时出现select，因此，您应升级到4.0版，并且不需要附加到选择

的隐藏输入

Answer 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);

这将＆＃34;设置＆＃34;选项就像你点击它一样。您可以通过在触发down之前触发相应数量的return按键来修改此选项以选择特定选项。

当你点击（或者在这种情况下点击enter）来选择一个选项时，看起来好像在引擎盖下，一个选项元素被添加到select元素。您会注意到，当页面首次加载select2时，选择元素没有任何option元素子元素。这就是为什么其他解决方案建议使用jQuery添加选项元素然后选择它。

Answer 7

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

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

改成

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

它开始保留所选项目。

Select2 Ajax方法未选择

的index.html

select.js

JSON响应

7 个答案:

修改