如何在键入时过滤jquery自动完成数据

到目前为止，我有以下几点

var aCleanData = ['aaa','aab','faa','fff','ffb','fgh','mmm','maa'];

$('#my-input').autocomplete({
    source:aCleanData,
    minLength:2
});

当前，如果您键入aa、aaa、aab、faa、maa，将显示

我想做的是当用户输入ff时，显示的数据将是fff，ffb数据

基本上，从第一个字符开始，只应匹配键入的内容

这应该是递归的。当用户键入fg、fff、ffb时，应取消显示，且仅显示fgh

提前感谢你的帮助

更新：

p、 明白我的意思了吧：

---

键入sc，您将看到的不仅仅是以sc开头的数据。

我认为您使用的是jqueryui-Autocomplete。一个搜索类型与您希望执行的方式不同。但是它可能会满足您的需要。

仅获取从输入值开始的结果的一种可能的解决方案是在自己搜索之前检查数组元素：

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

---

另请参见我的。

在查看自动完成的源代码后，您有几个选项。您可以编写自己的pasrer方法来返回所需的内容，并将其设置为回调源。这可能是更正确的方法

更快的方法是在包含ui源代码后简单地添加以下行：

$.ui.autocomplete.escapeRegex=function(){ 
    return '[^|\s]' + $value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");   
};

如果您关心它如何工作或应该如何工作，我没有测试：

原始代码使用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 );
    });
}
});

---

您所需要做的就是更改escapeRegex返回的内容，以便仅搜索单词开头。通过将escapeRegex的值设置为在原始返回前面返回“[^ |\s]”，我们说的是查找前面有空格的作品或是一行的开头，您可以简单地使用此技术：

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

---

您使用的是哪种自动完成功能？中的一个应该按您的意愿执行这就是上面描述的一个及其执行。想想看，我使用的是ui自动完成。这是一样的吗？如果我没有弄错的话，他们现在是一样的：引用这个插件是不推荐的，不再开发了。它的继承者是jQueryUI的一部分，这就是我正在使用的。我喜欢你保留了匈牙利符号风格——细节就是一切@我正在尝试为所有搜索添加一个默认值。如；在每个函数的内部，我添加else ifsElement.value=='SMTHNG_DEFAULT'aSearch，pushsElement；但它不会在自动完成时选择我的默认值，也不会显示在我的下拉列表中。你对此有什么建议吗？谢谢你的帖子。我发现@scessor建议的搜索键选项是一个很好的方法。