如何在键入时过滤您的 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。

提前感谢您的帮助。

更新：

附言看看我的意思：

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