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

Question

到目前为止，我有以下内容

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。

预先感谢您的帮助。

更新：

ps 看看我的意思：

http://jqueryui.com/demos/autocomplete/#default< /a>

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

Answer 1

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

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

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

如果您关心它是如何工作的（或者应该工作，我没有测试过）：

原始代码使用 2 个静态函数扩展了 ui.autocomplete：

$.extend( $.ui.autocomplete, {
escapeRegex: function( value ) {
    return value.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\
amp;");
},
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]' ，我们的意思是“查找前面有空格或者是行开头的工作” ”

Answer 2

我认为您使用jQuery UI - 自动完成。单一搜索类型与您想要的方式不同。但是这个可能可以满足您的需求。

Answer 3

您可以使用此技术的简单方法：

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

Answer 4

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

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

另请参阅我的 jsfiddle< /a>.