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。

提前感谢您的帮助。

更新：

P.S。看看我的意思：

http://jqueryui.com/demos/autocomplete/#default

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

Answer 1

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

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。

Answer 2

查看自动填充源后，您有几个选项。您可以编写自己的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]'，我们说“在前面查找带有空格的工作或者是行的开头”

Answer 3

我认为你使用 jQuery UI - 自动完成。一种搜索类型与您想要的方式不同。但this one可能会满足您的需求。

Answer 4

使用此技术的简单方法：

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

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

4 个答案: