2010-06-30 97 views
27

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

+2

相关: http://stackoverflow.com/questions/2382497/jquery-autocomplete-plug-in-search-configuration – sina 2011-08-15 00:57:30

回答

10

目前,我已经做到了这样,不知道是否有更好的解决方案:

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

这种做法也使人们有可能对项目的数量加以限制(例如10项)被显示。

+0

我绝不是这些东西的专家,但可以想象一个像Aho这样的字符串匹配算法-Corasick可以提供帮助。 – Huppie 2010-06-30 13:10:26

+0

在您误解我以前的评论之前。实现字符串匹配只能在性能绝对关键时才能完成,而剖析器向您显示您当前的解决方案是瓶颈。在此之前,请使用您现在拥有的解决方案。在这种情况下,代码的可读性胜过性能优势:) – Huppie 2010-06-30 15:35:03

+0

关于字符串匹配算法的建议也意味着像上面这样的自定义回调方法(如果我没有错的话)。即使UI自动完成已经实现了体面的搜索(包含),在某些特定情况下,您可能会感兴趣。 现在我会坚持我的实施(我只有3k 4chars每项)。 – Bart 2010-07-01 21:26:55

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

我想它需要beo patt.test而不是匹配 – toy 2011-08-10 12:05:45

+1

我注意到现在也是,或者它需要a.match(patt)。我不知道它是如何/为什么它以前工作,但它的确如此。 – 2011-08-11 16:35:41

+0

如果我想让单词结尾,该怎么办? 我试过这个正则表达式,var patt = new RegExp(“\\>”+ request.term,“i”); 但它没有奏效,btw,函数RegExp命名为“i”的第二个参数是什么意思? – Tarek 2013-08-24 13:19:06

2

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

这里的一个略有不同的方式来区分大小写搜索。请注意,在第二个示例中创建正则表达式时缺少“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); 
       } 
      }); 
23

看到这个:

比赛开始的字:

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。

例如

2

可以 “LHR伦敦” 由 “伦敦”

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

\ b断言在单词边界(| \ W $ | | \ W \ W \ W \ W^\ w)职位匹配用同样的方式进入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>