我正在使用本地数据源的jQuery UI自动完成(source: myArray
)。我希望自动填充只提出开头的结果输入的字符串而不是默认的不区分大小写包含搜索。有一个简单的解决方案,或者我必须提供自定义搜索/源回调吗?jQuery UI自动完成使用startsWith
回答
目前,我已经做到了这样,不知道是否有更好的解决方案:
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可以提供帮助。 – Huppie 2010-06-30 13:10:26
在您误解我以前的评论之前。实现字符串匹配只能在性能绝对关键时才能完成,而剖析器向您显示您当前的解决方案是瓶颈。在此之前,请使用您现在拥有的解决方案。在这种情况下,代码的可读性胜过性能优势:) – Huppie 2010-06-30 15:35:03
关于字符串匹配算法的建议也意味着像上面这样的自定义回调方法(如果我没有错的话)。即使UI自动完成已经实现了体面的搜索(包含),在某些特定情况下,您可能会感兴趣。 现在我会坚持我的实施(我只有3k 4chars每项)。 – Bart 2010-07-01 21:26:55
source: function(request, response) {
var t = jQuery.grep(t, function(a){
var patt = new RegExp("^" + request.term, "i");
return (a.match(patt));
});
response(t);
},
我进入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")
这里的一个略有不同的方式来区分大小写搜索。请注意,在第二个示例中创建正则表达式时缺少“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);
}
});
看到这个:
比赛开始的字:
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伦敦” 由 “伦敦”
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>
- 1. 使用jQuery UI自动完成
- 2. 自动完成jQuery UI的使用JSON
- 3. jQuery ui自动完成
- 4. jquery ui自动完成
- 5. 的jQuery UI自动完成
- 6. jQuery UI的自动完成
- 7. jQuery UI自动完成
- 8. jquery ui自动完成
- 9. Jquery UI自动完成
- 10. jQuery UI自动完成不起作用
- 11. jquery ui自动完成和json调用
- 12. jquery提到jquery ui自动完成
- 13. 如何使用jquery ui自动完成从属多重可选自动完成
- 14. jQuery-UI自动完成插件和黑莓自动完成器
- 15. jQuery UI自动完成自定义html
- 16. Jquery UI +移动自动完成问题
- 17. 强制jQuery UI自动完成移动?
- 18. 在进一步的jQuery-ui自动完成功能中使用jQuery-ui自动完成变量
- 19. 使用jquery自动完成
- 20. 使用JQuery自动完成?
- 21. 使用jQuery自动完成
- 22. jQuery UI自动完成缺少_renderItem
- 23. jQuery UI自动完成示例
- 24. jquery UI自动完成 - 扩展数据?
- 25. CakePHP的2.1和jQuery UI自动完成
- 26. 检测jQuery UI自动完成
- 27. jQuery UI自动完成相当于liblary
- 28. Jquery UI自动完成事件更改
- 29. jQuery UI的10.2自动完成
- 30. jquery ui自动完成 - 重点事件
相关: http://stackoverflow.com/questions/2382497/jquery-autocomplete-plug-in-search-configuration – sina 2011-08-15 00:57:30