jQuery UI 自动完成使用 startsWith

jQuery UI Autocomplete use startsWith

提问by Bart

I'm using the jQuery UI Autocomplete with a local datasource (source: myArray). I want the autocomplete to propose only the results that start withthe string entered instead of the default case-insensitive containssearch. Is there a simple solution for this or do I have to provide my custom search/source callback?

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

采纳答案by Bart

Currently I've done it this way, not sure if there is a better solution:

目前我已经这样做了，不确定是否有更好的解决方案：

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

This approach also made it possible to impose a limit (e.g. 10 items) on the amount of items to be shown.

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

回答by Bumptious Q Bangwhistle

See this:

看到这个：

Match start word:

匹配起始词：

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

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

He overrides the autocomplete filter method. I use this and it works well.

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

// 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);
    });
};

Match word:

匹配词：

Match startsWith of any word in the string.

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

e.g. "LHR london" is matched by "london"

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

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

\b assert position at a word boundary (^\w|\w$|\W\w|\w\W)

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

回答by ahmed hamdy

you can use Same way into Jquery UI Autocomplete Examples

您可以使用相同的方式进入Jquery UI 自动完成示例

<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>

ORanother way with using $.mapmethod not $.grep

或另一种使用$.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>

回答by DarrenD

I went into the Jqueryui code and switched it there.

我进入了 Jqueryui 代码并在那里切换了它。

If you look in the auto complete section, you will see the following line:

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

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

Modify it to the following (beware, this is a global change):

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

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

回答by djs

Here's a slightly different way to do case sensitive searching. Note the lack of "i" in the creation of the regexp in the second example, which is what causes case insensitivity in the default implementation.

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

case insensitive:

不区分大小写：

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

case sensitive:

区分大小写：

            $('#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);
                }
            });

回答by Jamie R Rytlewski

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