如何在 JQuery 自动完成中进行完全匹配？

Question

我在我的应用程序中实现了自动完成，并使用 azure 搜索建议。但目前，如果在两行之间找到匹配项，它会给出建议。但是我想搜索它以给定的术语开头，就像我输入 What is 那么它应该

名字是什么
第二个名字是什么
第三个名字是什么

但目前它的返回像

顺便问一下
名字是什么
第二个名字是什么

请看下面我正在使用的代码

$("#autocomplete").autocomplete({
                    source: "/home/suggest?username=myname&",
                    minLength: 3                   
                });


$.ui.autocomplete.filter = function (source, term) {
            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
            return $.grep(source, function (value) {
                return matcher.test(value.label || value.value || value);
            });
        };

Answer 1

当您将 source 设置为字符串时，自动完成功能不会使用其内部的 filter 函数。要做post-请求过滤，自己处理请求：

source: function( request, response ) {
    var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( request.term ), "i" );

    if ( this.xhr ) {
        this.xhr.abort();
    }

    this.xhr = $.ajax( {
        url: "/home/suggest",
        data: $.extend({username:"myname"}, request),
        dataType: "json",
        success: function( data ) {
            response(
                $.grep( data, function( value ) {
                    return matcher.test( value.label || value.value || value );
                } )
            );
        },
        error: function() {
            response( [] );
        }
    } );
}

解释：

filter 不是小部件 API 的一部分。你 不应该 在没有充分理由的情况下覆盖库的内部函数。

相反，使用 source 选项手动处理 post-过滤。第二个参数 response 为您要传递给小部件的任何结果提供回调。手动处理 AJAX 调用，然后在将结果传回 response 之前处理结果。 See here for an explanation of how source works.

免责声明：

这是不好的做法。 过滤首先在服务器上按术语完成，然后在客户端由 ^ 匹配器完成。它通过网络发送不必要的数据。它应该在一个点上完成。要么将所有数据预加载到客户端，要么让服务器处理过滤。

仅当你们都无法访问服务器代码且无法预加载时才使用此选项。

如何在 JQuery 自动完成中进行完全匹配？

How can I do exact match begin with in JQuery Autocomplete?

jquery

jquery-ui

jquery-ui-autocomplete

azure-cognitive-search