javascript 从简单数组开始使用 jquery 自动完成自动完成完全匹配

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10464160/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 09:58:20  来源:igfitidea点击:

auto complete exact match from start using jquery autocomplete from simple array

javascriptjqueryarraysautocomplete

提问by Vijai Krishna

How do I enable exact match from start of string using jquery autocomplete with input from simple array?

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

If i have the following in an array:

如果我在数组中有以下内容:

  • smart
  • oversmart
  • smartland
  • undersmart
  • verysmart
  • 聪明的
  • 过分聪明
  • 智能乐园
  • 不聪明
  • 很聪明

And if I am typing "sma..." in the text input, i must be shown only smart and smartland, not the others.

如果我在文本输入中输入“sma...”,我必须只显示 smart 和 smartland,而不是其他。

回答by keune

You just need to modify source parameter as a function to suit your needs. Like this:

您只需要将源参数修改为一个函数即可满足您的需要。像这样:

http://jsfiddle.net/UKgD6/

http://jsfiddle.net/UKgD6/



Update: Adding code to answer:

更新:添加代码来回答:

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

回答by Jonathan Vance

The way to do this is documented at http://api.jqueryui.com/autocomplete/

这样做的方法记录在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>

回答by atmd

You can use regular expressions to match the entered substring with the values in the array you have.

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

回答by Erik Reppen

JQuery has way too many plug-ins. Just sprinkle a little regEx on it and write something like this (I didn't test it but I've done similar stuff before):

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

You can remove the '^' +in the new RegExparameters to restore the behavior you're describing as problematic. '^'signifies beginning of a line/string selection so 's' won't match unless it's at the start.

您可以删除'^' +new RegEx参数来恢复你描述有问题的行为。'^'表示行/字符串选择的开始,因此 's' 将不匹配,除非它在开头。

回答by felwithe

This has changed since the previous answer was accepted. There is now a lookupFilteroption to do this and it is much simpler. From https://stackoverflow.com/a/23239873/1204434, just add this to your list of options:

自从上一个答案被接受以来,这已经发生了变化。现在有一个lookupFilter选项可以做到这一点,而且要简单得多。从https://stackoverflow.com/a/23239873/1204434,只需将其添加到您的选项列表中:

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