使用简单数组中的jquery自动完成从一开始就自动完成完全匹配答案

【问题标题】：auto complete exact match from start using jquery autocomplete from simple array使用简单数组中的jquery自动完成从一开始就自动完成完全匹配
【发布时间】：2012-05-14 21:40:24
【问题描述】：

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

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

智能
超智能
智能乐园
欠智能
非常聪明

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

【问题讨论】：

jQuery Autocomplete plug-in search configuration的可能重复

标签： javascript jquery arrays autocomplete

【解决方案1】：

你只需要修改源参数作为一个函数来满足你的需要。像这样：

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

【讨论】：

【解决方案2】：

执行此操作的方法记录在 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>

【讨论】：

我想知道这是否真的是最有效的方法。我不知道。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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 - 谢谢你，我会记住这一点并进行调整以查看它如何适合自动完成...

【解决方案5】：

自从上一个答案被接受后，情况发生了变化。现在有一个lookupFilter 选项可以执行此操作，而且要简单得多。来自https://stackoverflow.com/a/23239873/1204434，只需将其添加到您的选项列表中：

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

【讨论】：

这似乎是针对不同的插件