Select2 搜索下拉列表检查任何字符出现，需要更改为仅检查第一个字符

Question

我有一个 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 : FIDDLE

Answer 1

您可以创建 Custom matcher.

如文档中所写：

Custom matcher uses a compatibility module that is only bundled in the full version of Select2. You also have the option of using a more complex matcher.

编辑

在这里您可以找到 fiddle 实现您需要的代码。 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>

Select2 搜索下拉列表检查任何字符出现，需要更改为仅检查第一个字符

Select2 dropdown on search checking any character occurance, need to change to only check by first character

jquery

search

jquery-select2