jQuery - 自动完成插件答案

【问题标题】：jQuery - autocomplete pluginjQuery - 自动完成插件
【发布时间】：2011-06-06 07:41:40
【问题描述】：

我正在使用这个：

https://github.com/agarzola/jQueryAutocompletePlugin

唯一的问题是，当您在输入字段中键入第一个字符时，它会显示所有术语建议，包括不包含该字符的术语。

只有在您输入第二个字符后，它才会正常运行，显示仅包含这两个字符的标签建议。

我正在使用这个配置：

$('input.autocomplete').autocomplete("localhost/boo/?get_suggestions=1", {
   width: 250,
   max: 100,
   matchContains: true,
   minChars: 1,
   selectFirst: true,
   cache: false,
   multiple: true,
   multipleSeparator: " "
 });

有人知道解决方法吗？

当我输入一个随机字符串时，我知道它不在列表中，例如。 *&@FGBHFHBOFUBF*UB# 它将再次显示整个列表:(

后端：

if($_GET['get_suggestions']):
  $terms = get_all_terms();
  foreach ($terms as $term) echo $term['title']."\n";
  die();
endif;

【问题讨论】：

尝试发布“get_all_terms()”。你为什么犹豫发布代码？此外，当您输入内容时，打开开发人员工具（在 chrome 中检查元素，或在 firefox 中安装 firebug ext）并查看 xmlhttp 请求（在 chrome 中，单击控制台图标并右键单击，选择记录 xmlhttp 请求）。看看你输入“a”时是否提交“a”，输入“ac”时是否提交“ac”。如下所述，它可能只在“ac”中提交“a”，而在“a”中不提交任何内容
来源：函数（请求，响应）{ var filtersArray = $.map(orignalArray, function(item) { if( item.value.startsWith(request.term)){ return item; } else { 返回空值； } });响应（过滤数组）； }, stackoverflow.com/questions/3148195/…

标签： javascript jquery autocomplete

【解决方案1】：

我是维护该 github 存储库的人。这是发生了什么：

如果使用 url 作为数据，脚本会按照您在指定 url 中设置的任何内容发送请求，并在末尾添加 q=[current input value]。在您输入“a”时的初始加载情况下，这将发送到您的后端脚本：localhost/boo/?get_suggestions=1&q=a。因此，autocompelte.js 期望这个初始查询只生成与查询匹配的项目。在该初始请求之后，脚本将在内部处理过滤子集，以减少服务器负载。这就解释了为什么“ac”只返回符合您条件的项目。这是自动完成脚本执行过滤服务器提供的内容的工作。

如果我正确解释了您的后端代码，则它不会使用请求中发送的 q 参数，因此您的代码会返回所有可能的术语。自动完成假定这是正确搜索的结果并向您显示所有内容，等待输入更多字符以进一步过滤列表。

关键是您需要让后端脚本过滤术语列表，使其与q 参数匹配，然后再将其返回到自动完成脚本。

如果我能提供进一步的帮助，请告诉我！

【讨论】：

谢谢，我现在明白了 :P 但这不会使脚本查询服务器有点过多吗？
它应该只在每次输入最小字符数（在本例中为一个字符）时查询服务器。但请记住，一旦进行第一次查询，该术语的其余字符将在 JS 级别过滤。实际上，您现在设置它的方式是：在第一次加载时只进行一个查询（当您输入“a”时），其余的在本地完成（JS/浏览器，当您输入“c”时） .
谢谢 :) 请问是否可以更改建议框的布局以包含其他数据 - 例如此处的示例 2、3：tomcoote.co.uk/wp-content/CodeBank/Demos/JSONSuggestBox/…
是的，这是可能的。在此处查看原始脚本的选项：docs.jquery.com/Plugins/Autocomplete/…。在“选项”选项卡下，查找 formatItem。您可以将函数加载到该参数中，脚本将为结果列表中的每个项目运行该函数。您可以编写一个函数来获取每个项目所需的额外数据，并根据需要进行布局。

【解决方案2】：

我建议完全禁用第一个字符建议，并从第二个甚至第三个字符开始。包括我自己在内的大多数人都觉得在输入“b”后立即收到垃圾邮件很烦人。

【讨论】：

如果我这样做，也会发生同样的情况（在minChars 个字符之后）。因此，如果我更改为 3，它只会在我输入至少 4 个字符时才能正常运行...但是感谢您的建议，如果我可以让它工作，我会这样做:)
哦，但谁说我在谈论 minChars ghe ghe ghe :) 你可能会变得不礼貌并隐藏建议，直到达到你的个人 minChars。但首先你应该尝试找出问题所在。编辑我注意到的几件事，不是 localhost/boo/ 中的问题。阅读 AutoComplete 插件上的 github 页面，上面写着“Jörn Zaefferer 的（现已弃用）jQuery 插件”。可能很有趣。
是的，github 上的插件是一个已弃用的插件（来自 bassistance.de 的插件，现在集成在 jquery UI 中）的一个端口。

【解决方案3】：

将您的 minchars 更改为 2

 minChars: 2

这样就可以了，所以它只建议来自 2 字符的东西。

或尝试关闭多个。

multiple: false

您需要启用它吗？

如果这不是你的一杯茶，请发布 localhost/boo/?get_suggestions=1 的代码，我们会看看 :)

【讨论】：

就像我上面说的，错误仍然存在，但这次它出现在第二个字符上 :) localhost/boo/?get_suggestions=1 的代码看起来不错，它只是在每一行上回显了一个术语列表......跨度>

【解决方案4】：

自动完成代码在某些地方是错误的。从您发布的图片中，当您输入a 时，会显示一长串所有术语；当您输入 ac 时，建议列表匹配 a 而不是 ac。

这是什么意思？该代码采用输入值之前新字符被考虑在内。您可以深入了解插件代码，或使用新插件。

【讨论】：