我有一个select2下拉列表，如下所示：
我需要更改其搜索方法：
我在下拉列表中有以下值：
<option value="1">Apple</option>
<option value="2">Orange 2</option>
<option value="3">Banana</option>
<option value="4">Mango</option>
<option value="5">Pomegranate</option>
当我搜索芒果时它显示芒果和石榴，因为它们都包含字母 M 。
我只需按第一个字符搜索，就像我用字母M搜索一样，它应该只给Mango它不应该检查两者之间的字符!!
检查我的小提琴：FIDDLE
答案 0 :(得分：2)
您可以创建Custom matcher。
如文档中所述：
自定义匹配器使用兼容模块，该模块仅捆绑在完整版本的Select2中。您还可以选择使用更复杂的匹配器。
修改
在这里，您可以找到实现所需代码的小提琴。 This is官方文档参考
$(document).ready(function () {
// Single select example if using params obj or configuration seen above
var configParamsObj = {
placeholder: 'Select an option...', // Place holder text to place in the select
minimumResultsForSearch: 3, // Overrides default of 15 set above
matcher: function (params, data) {
// If there are no search terms, return all of the data
if ($.trim(params.term) === '') {
return data;
}
// `params.term` should be the term that is used for searching
// `data.text` is the text that is displayed for the data object
if (data.text.toLowerCase().startsWith(params.term.toLowerCase())) {
var modifiedData = $.extend({}, data, true);
modifiedData.text += ' (matched)';
// You can return modified objects from here
// This includes matching the `children` how you want in nested data sets
return modifiedData;
}
// Return `null` if the term should not be displayed
return null;
}
};
$("#singleSelectExample").select2(configParamsObj);
});.selectRow {
display : block;
padding : 20px;
}
.select2-container {
width: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<body>Single select example
<div class="selectRow">
<select id="singleSelectExample">
<option></option>
<option value="1">Apple</option>
<option value="2">Orange 2</option>
<option value="3">Banana</option>
<option value="4">Mango</option>
<option value="5">Pomegranate</option>
</select>
</div>
</body>