如何在键入时过滤 jquery 自动完成数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7734554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to filter your jquery autocomplete data while typing
提问by HGPB
So far I have the following
到目前为止，我有以下内容
var aCleanData = ['aaa','aab','faa','fff','ffb','fgh','mmm','maa'];
$('#my-input').autocomplete({
source:aCleanData,
minLength:2
});
Currently if you type aa, aaa,aab,faa,maawill show.
当前，如果您键入aa，aaa,aab,faa,maa将显示。
What I would like to do is when the user types ffthe data that is shown will be the fff,ffbdata.
我想做的是当用户键入ff显示的fff,ffb数据时。
Basically, only what is typed should be matched from the first character onwards.
基本上，只有键入的内容才能从第一个字符开始匹配。
This should be recursive. When user types fg, fff,ffbshould disapear and only fghshould appear.
这应该是递归的。当用户输入时fg，fff,ffb应该消失而只fgh应该出现。
Thanks in advance for your help.
在此先感谢您的帮助。
UPDATE:
更新：
p.s. See what I mean here:
ps 看看我的意思：
http://jqueryui.com/demos/autocomplete/#default
http://jqueryui.com/demos/autocomplete/#default
Type scand you'll see more than just the data beginning with sc.
键入sc，您将看到的不仅仅是以 sc 开头的数据。
回答by scessor
One possible solution to get only results starting with the input value is to check the array elements before search by yourself:
仅获得以输入值开头的结果的一种可能解决方案是在自己搜索之前检查数组元素：
var aCleanData = ['aaa','aab','faa','fff','ffb','fgh','mmm','maa'];
$('#my-input').autocomplete({
source: aCleanData,
minLength: 2,
search: function(oEvent, oUi) {
// get current input value
var sValue = $(oEvent.target).val();
// init new search array
var aSearch = [];
// for each element in the main array ...
$(aCleanData).each(function(iIndex, sElement) {
// ... if element starts with input value ...
if (sElement.substr(0, sValue.length) == sValue) {
// ... add element
aSearch.push(sElement);
}
});
// change search array
$(this).autocomplete('option', 'source', aSearch);
}
});
Also see my jsfiddle.
另请参阅我的jsfiddle。
回答by Law Metzler
After looking at the source for autocomplete, you have a few options. You could write your own pasrer method that returns what you need and set it as the callback source. This is probably the more "correct" way to do it.
查看自动完成的来源后，您有几个选择。您可以编写自己的 pasrer 方法，返回您需要的内容并将其设置为回调源。这可能是更“正确”的方法。
The faster way is to simply add the following line AFTER you include the ui source:
更快的方法是在包含 ui 源后简单地添加以下行：
$.ui.autocomplete.escapeRegex=function(){
return '[^|\s]' + $value.replace(/[-[\]{}()*+?.,\^$|#\s]/g, "\$&");
};
If you care how this works (or should work, I have not tested):
如果你关心它是如何工作的（或者应该工作，我没有测试过）：
The original code extends the ui.autocomplete with 2 static functions:
原始代码使用 2 个静态函数扩展了 ui.autocomplete：
$.extend( $.ui.autocomplete, {
escapeRegex: function( value ) {
return value.replace(/[-[\]{}()*+?.,\^$|#\s]/g, "\$&");
},
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 );
});
}
});
All you should need to do is change what escapeRegex returns to search for the beginning if words only. By setting the value of escapeRegex to return '[^|\s]'in front of the original return, we are saying "Look for the work with a space in front or is the beginning of a line"
您需要做的就是更改escapeRegex 返回的内容以仅搜索单词的开头。通过将escapeRegex的值设置'[^|\s]'为在原始返回之前返回，我们说“寻找前面有空格或行首的作品”
回答by kst
回答by Ashish Gupta
Simply way you can use this technique :
您可以简单地使用此技术：
const autocompleteFilter = function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( <array>, function( item ){
return matcher.test( item );
}) );
};
$("#From").autocomplete({
source: autocompleteFilter,
select: function(event, selectedItem) {
selectedItem = splitValue(selectedItem.item.value, 3);
if (selectedItem) {
return selectedItem.text;
} else
return false;
},
});
