搜索时选择2下拉菜单检查任何字符的出现,需要更改为仅检查第一个字符

问题描述 投票:0回答:1

我有一个

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

jquery search jquery-select2
1个回答
2
投票

您可以创建一个自定义匹配器

如文档中所写:

自定义匹配器使用仅捆绑在 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>

© www.soinside.com 2019 - 2024. All rights reserved.