选择2非相邻关键字的自定义匹配器

Select2 Custom Matcher for Non-Adjacent Keywords

本文关键字：自定义 关键字 选择      更新时间：2023-09-26

我在我的应用程序中使用Select2来允许搜索大约1200个选项的下拉菜单。

我目前正在使用Select2的匹配器的默认实现，只要关键字在搜索结果中相邻，它就能很好地工作:

function(term, text) { return text.toUpperCase().indexOf(term.toUpperCase())>=0; }

例如，搜索'stackoverflow question'返回选项'stackoverflow question about Select2'

然而，我希望匹配器返回基于非相邻关键字的结果。例如，我还希望它在搜索'stackoverflow select2'时返回上述选项。

有没有人知道如何创建一个自定义匹配器来允许这种行为?

这是我在Select2中所做的。我希望matcher只返回包含所输入的所有关键字的选项(假设关键字是由"分割的搜索项)。匹配不区分大小写。

        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
                // split by " " to get keywords
                keywords=(params.term).split(" ");
                // `data.text` is the text that is displayed for the data object
                // check if data.text contains all of keywords, if some is missing, return null
                for (var i = 0; i < keywords.length; i++) {
                    if (((data.text).toUpperCase()).indexOf((keywords[i]).toUpperCase()) == -1) 
                      // Return `null` if the term should not be displayed
                      return null;
                }
                // If here, data.text contains all keywords, so return it.
                return data;
            }

我知道这是一个古老的话题，但也许有人觉得这是有用的

如果您有大量数据或嵌套数据，那么排列将花费大量时间。

尝试使用非相邻关键字进行搜索。

把这个函数放到你的文档中。在初始化select2之前准备好

$(function () { 
    var keywords;
    $.fn.select2.defaults = $.extend($.fn.select2.defaults, {            
        placeholder: 'Select...',            
        matcher: function(term, text, option) {
            if ($.trim(term) === '') {
                return true;
            }             
            keywords = (term).split(" ");
            for (var i = 0; i < keywords.length; i++) {
                if ((text.toUpperCase()).indexOf((keywords[i]).toUpperCase()) == -1 )                        
                {                        
                    return false;
                }                                         
            }                
            return true;  
        }
    });
  $("#DropdownID").select2();
});

工作示例如下:http://makmilan.blogspot.in/2015/11/select2-custom-matcher-for-non-adjacent.html

试试这个:

search Stackoverflow question， Stackoverflow select2， select2 Stackoverflow ， about Stackoverflow select2 question， question select2 about

<select id="e17_2" style="width:300px">
   <option alt="Stackoverflow question about Select2">Stackoverflow question about Select2</option>
   <option alt="Stackoverflow Other line ...">Stackoverflow Other line ...</option>
</select>

复制自:https://stackoverflow.com/a/21745151/3710490

function permute(input, permArr, usedChars) {
    var i, ch;
    for (i = 0; i < input.length; i++) {
        ch = input.splice(i, 1)[0];
        usedChars.push(ch);
        if (input.length == 0) {
            permArr.push(usedChars.slice());
        }
        permute(input, permArr, usedChars);
        input.splice(i, 0, ch);
        usedChars.pop();
    }
    return permArr
};

$("#e17_2").select2({
    matcher: function(term, text) { 
                if (term.length == 0) return true;
                texts = text.split(" ");
                allCombinations = permute(texts, [], []);
                for(i in allCombinations){
                    if( allCombinations[i].join(" ").toUpperCase().indexOf(term.toUpperCase())==0 ){
                        return true;
                    }
                }
                return false;
    }
});

查找全部或部分命令式单词:

element.select2({
    matcher: function(term, text){
        if (term.length < 3) { return true }
        var terms = term.split(" ");
        var count = 0;
        var nbterm = terms.length;
        for(i in terms) {
            if (text.toUpperCase().match(new RegExp(terms[i], "i"))) { count++ }
                if(nbterm == count){
                    return true;
                }
             }
             return false;
         }
});
相关文章：