jQuery UI 自动完成使用startsWith

Posted 2023-03-05

【中文标题】jQuery UI 自动完成使用startsWith

【英文标题】：jQuery UI Autocomplete use startsWith

【发布时间】：2011-03-10 01:23:22

【问题描述】：

我正在使用带有本地数据源 (source: myArray) 的 jQuery UI 自动完成功能。我希望自动完成仅提出 以 输入的字符串而不是默认的 不区分大小写的包含 搜索的结果。是否有一个简单的解决方案或者我必须提供我的自定义搜索/源回调？

【问题讨论】：

相关答案：***.com/questions/2382497/…

【参考方案1】：

看这个：

匹配起始词：

http://blog.miroslavpopovic.com/jqueryui-autocomplete-filter-words-starting-with-term

他覆盖了自动完成过滤器方法。我用这个，效果很好。

// Overrides the default autocomplete filter function to search only from the beginning of the string
$.ui.autocomplete.filter = function (array, term) 
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
    return $.grep(array, function (value) 
        return matcher.test(value.label || value.value || value);
    );
;

匹配词：

匹配字符串中任何单词的startsWith。

例如“LHR london”与“london”匹配

var matcher = new RegExp("\\b" + $.ui.autocomplete.escapeRegex(term), "i");

\b 在单词边界处断言位置 (^\w|\w$|\W\w|\w\W)

【讨论】：

如何将其切换回默认过滤器？我问是因为：if(userInputsNumber) useDefault; else useStartsWith();

var matcher = new RegExp("\\b" + $.ui.autocomplete.escapeRegex(term), "i");适用于数字和字符串。

【参考方案2】：

您可以使用相同的方式进入Jquery UI Autocomplete Examples

<script>
$("#autocompleteInputField").autocomplete(
  source: function(request, response) 
          var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
          response($.grep(myArray, function(item)
              return matcher.test(item);
          ) );
      
);
</script>

OR 使用$.map 方法而不是$.grep 的另一种方式

<script>
$("#autocompleteInputField").autocomplete(
  source: function(request, response) 
          var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
          response($.map(myArray, function(item) 
               if (matcher.test(item)) 
                   return (item)
               
          ));
      
);
</script>

【参考方案3】：

这里有一种略有不同的区分大小写搜索的方法。请注意，在第二个示例中创建正则表达式时缺少“i”，这是导致默认实现不区分大小写的原因。

不区分大小写：

            $('#elem').autocomplete(
                source: array
            );

区分大小写：

            $('#elem').autocomplete(
                source: function(request, response) 
                    var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term, ""));
                    var data = $.grep( array, function(value) 
                        return matcher.test( value.label || value.value || value );
                    );
                    response(data);
                
            );

【参考方案4】：

source: function( request, response ) 
                var t = jQuery.grep(t, function(a)
                        var patt = new RegExp("^" + request.term, "i");
                        return (a.match(patt));
                    );
                response(t);
            ,

【讨论】：

我猜它需要 beo patt.test 而不是 match。

我现在也注意到了。或者它需要是 a.match(patt)。我不知道它以前是如何/为什么起作用的，但确实如此。

如果我想得到以结尾的单词怎么办？我试过这个正则表达式 var patt = new RegExp("\\>" + request.term, "i");但它没有用，顺便说一句，名为“i”的函数 RegExp 的第二个参数是什么意思？？

【参考方案5】：

我进入了 Jqueryui 代码并将其切换到那里。

如果您查看自动完成部分，您将看到以下行：

filter:function(a,b)var g=new RegExp(d.ui.autocomplete.escapeRegex(b),"i")

将其修改为以下内容（注意，这是全局更改）：

filter:function(a,b)var g=new RegExp("^" + d.ui.autocomplete.escapeRegex(b),"i")

【参考方案6】：

目前我是这样做的，不知道有没有更好的解决方案：

source: function(request, response) 
    var filteredArray = $.map(orignalArray, function(item) 
        if( item.value.startsWith(request.term))
            return item;
        
        else
            return null;
        
    );
    response(filteredArray);
,

这种方法还可以对要显示的项目数量施加限制（例如 10 个项目）。

【讨论】：

我绝不是这些方面的专家，但可以想象像 Aho–Corasick 这样的字符串匹配算法可以提供帮助。

在您误解我之前的评论之前。只有在性能绝对关键并且分析器向您显示您当前的解决方案是瓶颈时，才应该实现自己匹配的字符串。在那之前，请使用您现在拥有的解决方案。在这种情况下，代码的可读性胜过性能优势 :)

您关于字符串匹配算法的建议也意味着像我上面的自定义回调方法（如果我没记错的话）。尽管 UI 自动完成功能已经实现了不错的搜索（带有包含），但在某些特定情况下可能会很有趣，就像您说的那样。现在我会坚持我的实现（我只有 3k 个项目，每个项目 4 个字符）。

我会接受我自己的答案，因为我没有其他选择。

我已经输入了相同的代码以使其通过'start with'工作，但它不起作用，现在我插入它时根本没有出现下拉列表:(我的问题可能是什么？可能应该包括一些额外的脚本