如何在JQuery Autocomplete中开始完全匹配?

时间:2019-04-04 17:11:40

标签: jquery jquery-ui jquery-ui-autocomplete azure-search

我已经在我的应用程序中实现了自动完成功能,并使用天蓝色搜索来提供建议。但是目前,如果在行之间找到匹配项,则会给出建议。但是我想搜索给定术语的开头,例如,如果输入什么,则应该

  • 什么叫名字
  • 什么是第二名
  • 什么是第三名

但目前返回的样子

  • 顺便说一句
  • 什么叫名字
  • 什么是第二名

请参见下面我正在使用的代码

$("#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);
            });
        };

1 个答案:

答案 0 :(得分:0)

source设置为字符串时,自动完成功能不会使用其内部的filter函数。要进行请求后过滤,请自己处理请求:

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选项手动处理后过滤。第二个参数response为要传递给窗口小部件的任何结果提供回调。手动处理AJAX调用,然后处理结果,然后再将其传递回responseSee here for an explanation of how source works.

免责声明:

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

仅当您都无法访问服务器代码并且无法预先加载时,才使用此功能。