我有一个
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>
当我搜索 Mango 时，它显示 Mango 和 Pomegranate，因为两者都包含字母 M。
我只需要按第一个字符搜索，就像当我用字母M搜索时，它应该只给出Mango，而不应该检查中间的字符！！
检查我的小提琴：FIDDLE
您可以创建一个自定义匹配器。
如文档中所写：
自定义匹配器使用仅捆绑在 Select2 完整版本中的兼容性模块。您还可以选择使用更复杂的匹配器。
编辑
在这里你可以找到一个实现你需要的代码的小提琴。 这是官方文档参考
$(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>