Question

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

Answer 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字符串中的任何单词。

e.g。 “LHR伦敦”与“伦敦”相匹配

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

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

Answer 2

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

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

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

Answer 3

您可以使用相同的方式进入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>

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

Answer 4

我进入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")

Answer 5

这是进行区分大小写搜索的略有不同的方式。注意缺少＆＃34; i＆＃34;在第二个示例中创建regexp，这是导致默认实现中不区分大小写的原因。

不区分大小写：

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

Answer 6

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

jQuery UI Autocomplete使用startsWith

6 个答案: