jquery-chosen 下拉列表应该在顶部获得匹配的搜索结果

Dev*_*ika 5 javascript jquery jquery-chosen

我有 jquery 选择的下拉菜单,可以很好地满足我的需要。我唯一的要求是我们可以在顶部获得匹配的搜索结果(以搜索键开头的选项)。

如果我有3种选择FooBooooo然后搜索oo。按字母顺序获取结果,如 Boo, Foo, ooo。但是,我们能得到类似ooo, Boo,的结果吗Foo

$('.chosen-select').chosen({
    width: "100%",
    search_contains: true
});
Run Code Online (Sandbox Code Playgroud)

我不确定该插件是否对此有任何支持。请建议。

Shi*_*tne 0

您可以像下面这样编写自定义逻辑。我在评论中添加了同样的小提琴。

<div id = "results"></div>


$( document ).ready(function() {
    var chosenValues = ["Foo", "Boo", "Ooo"];
    var sortedData = checkStartsWith(chosenValues, 'oo');    
        $("#results").text(sortedData)
});
function checkStartsWith(chosenValues, searchTerm) {
    var matchedData = [];
    var unMatchedData = [];
    for (var i = 0; i < chosenValues.length; i++) {
        // This condition will check if searchTerm is at the beginning of data
        if (chosenValues[i].toLowerCase().indexOf(searchTerm.toLowerCase()) == 0) {
            matchedData.push(chosenValues[i]);
        }
        else {
            unMatchedData.push(chosenValues[i]);
        }       
    }
     matchedData.sort();
     unMatchedData.sort();
     return (matchedData.concat(unMatchedData));
}
Run Code Online (Sandbox Code Playgroud)