使用远程源时，jQuery 自动完成功能不起作用

Posted 2023-05-08

【中文标题】使用远程源时，jQuery 自动完成功能不起作用

【英文标题】：jQuery autocomplete does not work when using remote source

【发布时间】：2012-09-09 13:55:48

【问题描述】：

html：

<input type="text" id="shop-id">

JS：

$(document).ready(function()

    $( "#shop-id" ).autocomplete(
        source: "/ticket/get_sids",
        select: function(event, ui)
          //...
        
    );               

);

有一个奇怪的自动完成问题。如果我用这样的静态变量声明源

    var data = ["0200","0032"];

    $( "#shop-id" ).autocomplete(
        source: "/ticket/get_sids"
    );

一切都像预期的那样。

但使用动态源网址，自动完成似乎不会过滤搜索。就像无论我输入什么作为搜索文本，自动完成都会打开整个源而不过滤。例如。我输入一个“g”，它会打开 0200、0032，但它不应该是因为“g”与源中的任何内容都不匹配。

动态源返回纯 json，如：["0200","0032"]。这是一个php页面：

return new Response(json_encode($data));

返回

["0200","0032"]

在浏览器窗口中。

环境：jQuery 1.7.2 jQuery-Ui 1.8.2

【参考方案1】：

您缺少将用于发回过滤器值的数据参数...如果这有意义的话。所以你需要在返回响应数据之前实现某种形式的服务器端过滤

”我输入一个“g”，它会打开 0200、0032，但它不应该是因为“g”与源中的任何内容都不匹配。”

$(document).ready(function()

    $( "#shop-id" ).autocomplete(
        source: "/ticket/get_sids",
        select: function(event, ui)
          //...
        ,
       data:  term: request.term     //"term" could be anything, based on parameters your server side method expects
        //...
     )
 );    

我之前回答过一个类似的问题。希望这可以帮助？ https://***.com/a/11930525/1105314

【参考方案2】：

使用字符串时，自动完成插件期望该字符串指向将返回 JSON 数据的 URL 资源。它可以在同一台主机上，也可以在不同的主机上（必须提供 JSONP）。自动完成插件不会过滤结果，而是将请求参数“term”添加到 URL 中，服务器端脚本应该使用它来过滤结果.