如何使用 jquery 自动完成和简单数组的输入从字符串的开头启用精确匹配?
如果我在数组中有以下内容:
- 聪明的
- 聪明过头
- 智能乐园
- 不够聪明
- 很聪明
如果我在文本输入中输入“sma...”,我必须只显示 smart 和 smartland,而不是其他。
如何使用 jquery 自动完成和简单数组的输入从字符串的开头启用精确匹配?
如果我在数组中有以下内容:
如果我在文本输入中输入“sma...”,我必须只显示 smart 和 smartland,而不是其他。
您只需将源参数修改为一个函数以满足您的需要。像这样:
更新:添加代码来回答:
var acList = ['smart', 'oversmart', 'smartland', 'undersmart', 'verysmart'];
$('#ac').autocomplete({
source: function (request, response) {
var matches = $.map(acList, function (acItem) {
if (acItem.toUpperCase().indexOf(request.term.toUpperCase()) === 0) {
return acItem;
}
});
response(matches);
}
});
这样做的方法记录在http://api.jqueryui.com/autocomplete/
<script>
var tags = [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ];
$( "#autocomplete" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( tags, function( item ){
return matcher.test( item );
}) );
}
});
</script>
您可以使用正则表达式将输入的子字符串与您拥有的数组中的值进行匹配。
JQuery 有太多的插件。只需在上面撒一点正则表达式并写下这样的东西(我没有测试它,但我之前做过类似的事情):
$('#someTextInput').keyup( function(){
var regExMatch = new RegEx( '^' + $(this).val() );
$_LIs = $('#someUl li');
$_LIs.hide();
$_LIs.each( function(){
if( this.innerText.match(regExMatch) ) { $(this).show(); }
} );
} );
您可以删除参数'^' +
中的new RegEx
以恢复您描述为有问题的行为。'^'
表示行/字符串选择的开始,因此 's' 将不匹配,除非它位于开头。
自从上一个答案被接受以来,这种情况发生了变化。现在有一个lookupFilter
选项可以做到这一点,而且要简单得多。从https://stackoverflow.com/a/23239873/1204434,只需将其添加到您的选项列表中:
lookupFilter: function (suggestion, originalQuery, queryLowerCase) {
return suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0;
},