如何jquery自动完成json结果？

Posted 2023-05-08

【中文标题】如何jquery自动完成json结果？

【英文标题】：How to jquery autocomplete json results?

【发布时间】：2016-07-08 17:38:52

【问题描述】：

附加的代码有两个问题：

首先，json 中的搜索结果仅在我删除文本输入时出现，而不是在我键入时出现......就像我需要的那样。第二个是，当我点击其中一个结果显示它时，我需要将文本转到输入文本的值。

我该怎么做？

用the code粘贴bin：

用json example粘贴bin：

谁能帮帮我？

【问题讨论】：

你能发布一个关于你的 json 数据的例子吗？如果我知道 json 结构，我可以帮助你。

当然，我编辑了描述 (sou brasileiro também)。

我看到了用葡萄牙语写的 cmets ;)

【参考方案1】：

根据 Autocomplete docs，它不适用于 json 数据，仅适用于数组。

尝试这样的想法，应该可以。

var arr = ['project1', 'another project', 'more one project'];

     $("#project").autocomplete(
       minLength: 0,
       source: arr,
       focus: function( event, ui ) 
         $("#project").val( ui.item.label );
         return false;
       
     );

要在擦除字段时隐藏结果，您应该像这样设置 minLengh

$project.autocomplete(
    minLength: 1,
    source: projects,
    focus: function( event, ui ) 
      $project.val( ui.item.label );
      return false;
    
  );

如果您想在后端搜索数据，我认为您应该考虑使用将数据过滤为查询字符串的选项，请查看此文档部分：

字符串：当使用字符串时，自动完成插件期望 指向将返回 JSON 数据的 URL 资源的字符串。它可以 位于同一主机或不同主机上（必须提供 JSONP）。这 自动完成插件不过滤结果，而是一个查询 string 添加了一个 term 字段，服务器端脚本应该 用于过滤结果。例如，如果源选项是 设置为“http://example.com”，用户输入 foo，一个 GET 请求 将发送到http://example.com?term=foo。数据本身可以 与上述本地数据的格式相同。

【讨论】：

我认为这不是问题，因为我有一个带有静态 json 的示例并且可以完美运行。即使使用上面的这段代码，当我删除文本的值时，自动完成功能也会起作用，而不是在我输入的时候。

现在我很困惑，你能用静态 json 在 jsfiddle 或 codepen 上展示你的例子吗？

我现在看到了，项目是一个数组；）它看起来在这里工作正常，你的代码有什么问题？请记住，自动完成的输入是去抖动的，您需要停止写入才能显示结果。

这正是 data.php?query= 中返回的 json，当我输入内容时，当我删除输入时，结果就会出现！ [ “图片”：“scontent.cdninstagram.com/t51.2885-19/s150x150/…”，“用户名”：“@claudiaalende”，“图片”：“scontent.cdninstagram.com/t51.2885-19/s150x150/…”，“用户名”：“@divulgacao16_”，“用户名”：“# claudiaalende”，“pic”：“hashtag.png”，“用户名”：“#claudiaalende”，“pic”：“hashtag.png”]

终于我明白了，问题是 上的 javascript 包含，当我移动到 的底部时，工作正常。谢谢。