Question

我正在使用Select2 3.5.2。尝试绑定到label和value而不是id和text的数组时，Select2自动完成功能无效。如果有任何我缺少的选择，你能告诉我吗？

＆＃13;

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

＆＃13;

</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" />

＆＃13;

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

＆＃13;

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的<input type="text" />元素交换出来。

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

1 个答案: