当绑定元素名称不同时，Select2 自动完成功能不起作用

Question

我正在使用 Select2 3.5.2。当尝试绑定到 label 和 value 的数组而不是 id 和 text 时，Select2 自动完成功能不起作用。如果我遗漏了任何选项，你能告诉我吗？

jQuery(document).ready(function () {
  var optionsList = [{value: 1, label: 'first'}, {value: 2, label: 'second'}, {value: 3, label: 'third'}, {value: 4, label: 'fourth'}];

  $("#example_select2").select2({ 
    data: optionsList,
    dropdownAutoWidth: true,
    id: 'value',
    formatResult : function(item) { return item.label; },
    formatSelection: function(item) { return item.label; }                        
  });
});

</style><!-- Ugly Hack -->

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" />

<div id="example_select2"></div>

Answer 1

您看到的问题不是因为 id 被更改，而是因为您在数据对象中使用 label 而不是 text。 Select2 默认匹配对象的 text 键，所以如果你不设置它就找不到任何东西是有道理的。

您可以通过更改数组数据以使用 text 或将 value 键重新映射到 text 键来解决此问题。我还建议为您的 value 键（使其成为 id）执行此操作，但这不是必需的，因为 Select2 3.5.2 支持 id 选项。 Select2 4.0.0 does not.

jQuery(document).ready(function () {
  var optionsList = $.map(
    [{value: 1, label: 'first'}, {value: 2, label: 'second'}, {value: 3, label: 'third'}, {value: 4, label: 'fourth'}],
    function (obj) {
  obj.id = obj.id || obj.value;
  obj.text = obj.text || obj.label;
 
  return obj;
});

  $("#example_select2").select2({ 
    data: optionsList,
    dropdownAutoWidth: true                       
  });

});

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" />

<input id="example_select2" type="text">

Select2 也不支持附加到 <div> 元素，所以我用更 JavaScript-disabled-friendly <input type="text" /> 元素替换了它。

当绑定元素名称不同时，Select2 自动完成功能不起作用

Select2 autocomplete not working when bind element names are different

jquery

jquery-select2