如何在 JQuery 自动完成中开始精确匹配？

Posted 2023-05-08

【中文标题】如何在 JQuery 自动完成中开始精确匹配？

【英文标题】：How can I do exact match begin with in JQuery Autocomplete?

【发布时间】：2019-08-26 13:00:30

【问题描述】：

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

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

但目前它正在回归

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

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

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

【问题讨论】：

为了清楚起见，你想用这个逻辑做什么？ return matcher.test(value.label || value.value || value);

@Taplar 感谢您的快速回复。我也对这条线感到困惑......当我在谷歌上搜索时，我发现了这个建议。

您能否格式化您的问题，以便对预期结果和实际结果的解释清楚？也许使用引号、换行符或其他什么？否则很难理解你的问题。另外，请分享调用您的搜索服务的代码。看起来这段 JS 代码正在调用您自己的 API，而后者又调用 Azure 搜索。

@BruceJohnston 你能建议我吗？我已经格式化了我的问题

@Ajay 请分享调用 Azure 搜索的代码（无论 /home/suggest 后面的代码是什么）。这样我们就可以知道您调用了哪个 API 以及您传递了哪些参数。

【参考方案1】：

当您将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 调用，然后处理结果，然后将其传递回response。 See here for an explanation of how source works.

免责声明：

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

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