问题标签 [jquery-ui-autocomplete]

我需要一些关于如何在我的 Rails 应用程序中实现jquery-ui 自动完成的帮助。

我想在用户可以输入客户姓名的文本字段中添加自动完成功能。由于可能有数百名客户，我需要从表中“远程”提取建议的自动完成值（至少这是我所理解的）。

我无法理解的要点是如何向自动完成文本框提供建议的值。我已经阅读了 jquery-ui 文档，但在这件事上我似乎有点密集。

所以我真正想要的是一个如何让它在 Rails 应用程序中工作的示例，不一定是对 javascript 构建方式的完整描述（这就是 jquery-ui 团队为我所做的 =)）。

例如，如何为自动完成准备数据，以及如何将自动完成功能附加到文本框。

默认情况下，jQuery U Autocomplete 会生成一个结果列表，单击结果后，它将使用单击的结果文本填充文本字段。

我想更改此行为，以便在单击结果时将您带到该结果的页面。要生成超链接，我可以传入结果的 ID。

我正在使用 PHP JSON 带回结果集：

这是我当前的 jQuery：

我想对 jQuery UI 自动完成进行一些自定义：

1) 如果没有找到结果，它应该在列表中输出“no results found”。

2）是否可以在输入结果时突出显示/加粗字母？例如，如果我输入“球”并且我的结果中有“足球”，它需要输出为足球

3) 出现在顶部的结果是否可以匹配字符串的开头。例如，假设我的数据库中有 3 个条目：

• 占星家
• 空间站
• 星星

我开始输入“st”——这将按顺序显示这 3 个条目。但我希望“明星”成为第一个结果。

目前用于生成结果的 MySQL 查询是：

我在 jquery ui 对话框中使用 jquery ui 自动完成小部件。当我输入搜索文本时，文本框缩进（ui-autocomplet-loading）但不显示任何建议。

company 是附加自动完成的文本框的 ID。

我认为它可能是 az index 所以我设置了这个：

但它仍然没有显示。我将自动完成功能放在“常规”页面中，效果很好。

我正在使用 jquery ui 版本 1.8.2。关于在哪里看的任何想法？

我相信这已经被问过很多次了，但希望能得到一些帮助。

我正在尝试设置 jQuery UI，我可以从 JSON 获取静态结果列表。但是我需要将我的 INPUT 值传递给 PHP 脚本，以便它可以实际过滤结果。

我的输入字段代码

我运行 Javascript 的代码

并且 testData.php 正在返回有效的 JSON 数据。但我不知道如何将变量从输入字段传递到我的 testData.php 以便它实际上知道要搜索什么。

希望这是有道理的。

在下面的代码中，我对三个不同的事件（焦点、选择、更改）具有相同的功能。这似乎是多余的，但我不知道如何将三者合二为一。提前感谢您的任何想法！

我在让 jQuery 的自动完成小部件为我工作时遇到了很多麻烦。我正在使用来自服务器的键/值对列表。

我有以下要求：

如果用户从小部件中选择一个值，我想将 ID 传递给服务器。

如果用户没有选择值并输入原始文本，或者修改了已选择的值，我希望清除 ID 字段并将原始文本发送到服务器。

假设someAjaxFunction返回自动完成小部件期望的对象数组：{label:label, value:key}.

最初我像这样设置自动完成小部件：

即使通过将鼠标悬停在其中一项上来更改选择，也会将 $(input) 引用的文本框中的文本更改为基础键，而不是标签。从用户交互的角度来看，这是非常不可取的——事实上，我正在调查这个问题的真正原因是因为我正在构建的网站的用户一直对他们输入的文本似乎变成随机数感到困惑！

我在文本框下添加了一个隐藏字段并实现了 select() 和 focus() 事件，以便像这样隐藏 ID：

当用户坚持使用自动完成下拉菜单提供的脚本时，这很有效。ID 被隐藏并正确提交给服务器。不幸的是，如果用户想在框中输入一些自由格式的文本并根据该值进行搜索，则 ID 字段不会重置，并且之前选择的 ID 会提交给服务器。这也是相当混乱的。

jQuery UI Autocomplete 文档列出了一个change事件，并声明参数的item属性ui将设置为所选项目。我想我可以在按键时重置隐藏的 id 字段，如果自动完成更改，则重新填充 ID。不幸的是，除了 keypress 事件捕获一大堆不应重置 ID的按键之外，return false上述select事件中管理文本框中文本所必需的语句会阻止change事件正确分配 ui.item。

所以现在我被困住了——我真的不知道我还能尝试什么让小部件支持默认情况下应该支持的功能。要么这个过程比它应该的要复杂得多，要么我错过了一些非常明显的东西。我已经挑选了所有可用的事件和所有示例，但空手而归。事实上，即使是 jQuery UI 页面上的“自定义数据和显示”示例也存在这个问题。

我可以在服务器端添加一些技巧来解决这个问题，但我真的更希望能够在客户端级别做到这一点。

我也更愿意坚持使用 jQuery UI 自动完成小部件，而不是切换到另一个小部件。

我正在使用jQuery.UI.autocomplete小部件。自动完成小部件绑定到的文本框几乎位于页面（表单）的底部，因此当用户开始在那里输入时，列表角色会在屏幕外向下滚动，因此您必须在浏览器中向下滚动页面才能查看完整列表虽然文本框上方有足够的空间。

如果文本框下方没有足够的可见空间（如普通下拉列表），有没有办法让列表角色上升而不是角色下降？

是的，这确实是我关于 jQuery UI 自动完成的第三个或第四个问题。我最近的烦恼是单击表单中的“提交”按钮似乎不算作 jQuery 的“更改”。当我的输入框发生变化时，jQuery 会运行一些 javascript 来强制匹配可接受的输入列表及其值：

如果 EmployeeNumber (hidden) 输入已经有一个值，输入一个无效的名称，然后按 Tab 键或单击输入框会清除该值，但是如果您立即点击表单Submit按钮，它似乎不算作“更改” ' 并且POST数据包括以前的 EmployeeNumber 值 - 使应该是不正确的输入“有点”正确！

是否有某种方法可以让 jQuery 认识到单击“提交”也是一种更改，或者我可以通过某种方法让Submit按钮通知 jQueryResource输入已被单击？

更新：

最后，我通过使用我认为相当老套的方法解决了这个问题——我放弃了自动完成框的“更改”事件，并在用户单击提交时手动匹配自己。它现在的工作方式是，如果用户通过单击自动完成下拉菜单选择名称，则 EmployeeNumber 值将由自动完成 jQuery 代码填充。如果用户只是键入名称并点击提交，则匹配由 forceCheck() 函数完成。当然，无论是否有第二个相同的名字，这个函数都会自动匹配第一个名字，但不幸的是，在我见过的最奇怪的怪癖中，for循环结束后的任何代码都不会被执行，即使循环中没有'return'语句。循环完成后，提交请求继续......这非常奇怪。

如果有人知道比这更好的方法，我将非常感谢您的回答 - 或者如果您知道为什么我的 forceCheck 函数的其余部分可能无法运行......否则，我明天将发布这篇文章作为我自己问题的答案，并在可能的情况下接受它（我相信两天后）。

最终更新：

好吧，已经超过 24 小时（更多），所以我将我的解决方案发布为“答案”。如果仍然没有其他答案，我会再放几天然后接受它。

我已经使用 jquery-ui 自动完成输入框并从所选项目中设置隐藏值。

这是我使用

选项（现在可能是错误的，手头没有代码，但它一直有效，直到我的问题......）

它在用鼠标从菜单中选择一个项目时起作用，但是如果我只是输入一些文本并用 Enter 选择一个项目 - 它什么也不做，就好像自动完成功能根本没有运行选择一样。但是，开箱即用的选项卡会触发选择。

我使用了焦点和更改：也更新了我想要的字段，但我认为这有点矫枉过正，如果真的有必要指定所有焦点、更改和选择，只是为了确保用户从它实际上将被选中的列表。

谢谢你。

rofly：我正在使用 jquery-ui 自动完成，它有你提供的代码，但它看起来像这样（来自 jquery.ui.autocomplete.js）

这看起来很花哨，所以我不确定它是否因此而失败。

我的代码是这样的（包装在 document.read()

所以，问题是，当用户用鼠标从菜单中选择并且在字段中跳出时（keyUp，keyDown 选择然后跳出，工作）但是 keyUp，keyDown 选择它，然后输入，并且没发生什么事！