使用jQuery自动完成从简单数组中准确匹配开头的内容。

12

如何使用jquery自动完成从简单数组输入启用字符串的起始精确匹配?

如果我有以下数组:

  • smart
  • oversmart
  • smartland
  • undersmart
  • verysmart

如果我在文本输入框中输入"sma...",则只应显示smart和smartland,而不是其他。


可能是重复的问题:jQuery自动完成插件搜索配置 - j08691
5个回答

16
你只需要将source参数修改为一个适合你需求的函数即可。像这样:

http://jsfiddle.net/UKgD6/


更新:附上答案代码:

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);
    }
});

3

实现此功能的方法已在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>

我不知道这是否是最有效的方法。我毫无头绪。 - lenny

1

您可以使用正则表达式将输入的子字符串与您拥有的数组中的值进行匹配。


0

自从上一个答案被接受以来,情况已经发生了变化。现在有一个lookupFilter选项可以实现这个功能,而且更加简单。根据https://stackoverflow.com/a/23239873/1204434,只需将此选项添加到您的选项列表中即可:

lookupFilter: function (suggestion, originalQuery, queryLowerCase) {
                return suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0;
            },

这似乎是针对不同插件的。 - kjones

0
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' 在开头,否则不会匹配。

Erik - 谢谢,我会记住这个并进行微调,看看它如何适用于自动完成... - VKVK

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接