可扩展自动完成

发布日期 作者

在 jQuery UI 1.8 中发布的 自动完成小部件 是 jQuery UI 团队的一个非常重要的里程碑。如果您查看了该小部件，您可能会注意到它只有 四个选项，远少于我们的其他插件。与 进度条（我们选项最少的插件）不同，自动完成的小 API 不是插件简单性的直接结果。事实上，自动完成非常复杂。

在设计自动完成小部件时，我们以 Jörn Zaefferer 的自动完成插件 为模型，该插件有 21 个选项。诚然，Jörn 的插件比我们的插件更能为您提供开箱即用的功能，但我们更小的 API 具有同等的灵活性，而且易于学习和使用。我们花费了大量的时间、讨论和原型制作，将 21 个选项缩减到 4 个。

自动完成开箱即用地支持 本地数据源 和 远程（JSON）数据源，只需在 source 选项中提供数组或 url。对 JSONP、XML 和 缓存 的支持都可以通过几行代码叠加在上面。

此外，还有一组由我托管的 扩展，它们为自动完成小部件提供了额外的选项。 html 选项 (演示) 允许您指定标签是作为 HTML 还是文本进行解释。还有 selectFirst 选项 (演示)，它在菜单显示时自动激活第一个项目，从而减少选择选项所需的按键次数。 autoSelect 选项 (演示) 允许用户输入一个有效选项，然后从该字段中跳出，而无需从菜单中选择该项目。如果用户输入的值有效，则将触发 select 事件，就像用户已从菜单中显式选择该项目一样。我还有一个 重音折叠扩展 (演示)，它使用户更容易选择带有重音字符的值。例如，如果有一个带有文本“Jörn”的项目，用户通常需要输入变音符才能看到该项目。但是，如果加载了重音折叠扩展，用户可以输入“Jorn”，他们仍然会看到结果。

更进一步，您可以使用自定义数据格式和定义自定义显示。例如，您可以 对结果进行分类 或 显示附加信息，例如项目描述和图像。甚至还有一个 可扩展搜索结果 的示例（注意：这只是一个基于 Roman Chyla 的演示 的原型，它不是完整功能的。有关更多详细信息，请参见 论坛帖子）。您甚至可以支持从单个文本字段中的 多个词语。

最后，还有一个 组合框 演示，它将自动完成功能带到了选择元素。组合框隐藏了选择元素，而是显示一个文本字段供用户输入。可能的值是通过解析选择元素中的选项来确定的，用户可以通过单击文本字段旁边的按钮查看所有选项。有关组合框工作原理的详细说明，请查看 Jörn 在 Learning jQuery 上的文章。

关于“可扩展自动完成”的 18 个想法

  1. Álvaro G. Vicario 在 说：

    该小部件确实比乍看起来更强大，但 API 文档缺少一些重要的信息。例如，它没有提到 JSON 响应的格式（或者至少我没有找到），您基本上必须浏览不同演示的源代码并进行一些猜测。

    无论如何，对于第一个版本来说，这是一组很棒的功能。

  2. Pingback: 可扩展自动完成

  3. Bertrand 在 说：

    这真是太令人兴奋了。

    是否有计划让自动完成更加接近 Ext Js 组合框，并提供分页选项。

    继续加油……干得好

  4. Pingback: 可扩展自动完成

  6. 匿名 在 说：

    干得好，我希望下一次使用 jquery-ui-1.8.x.custom 包作为扩展以及文档中的提示提供“必备”扩展。我已经更新到 1.8.4，并且自动完成中的 html 不再起作用了。纯属巧合，我在本文中找到了这个问题。

    谢谢！

  7. Pingback: 可扩展自动完成« jQuery UI 博客 » KHMER855.COM

  8. Pingback: Trevor Turk — 10-25-10 的链接

  9. Pingback: 匿名

  10. winmaster 在 说：

    它存在一个 bug。输入 A。然后删除输入文本并输入 B。
    我看到了粗体的“APPLE”。🙁

  12. Tyler 在 说：

    这很棒；有没有办法强制用户从数据源中选择一个值？自动完成的一大问题是用户可以输入错误的数据（例如，如果您根据规范化的数据库表输入州 + 国家——用户不应该能够输入无效数据）。

  13. Huxley 在 说：

    @Tyler

    您可以运行一个 Ajax 验证器，如果数据与现有选项不匹配，则阻止提交，但您也应该在服务器端验证数据，以确保不会提交恶意（不仅仅是不正确）数据（例如，用户使用 Firebug 之类的东西修改了您的表单）

  17. John Congdon 于 说：

    我们已经实现了自动完成功能，并添加了一些额外的功能。我们是一个电子商务网站，所以我想展示产品的图片、产品名称、评论，以及产品是否有视频。

    此外，我还想让顾客能够导航到他们想要的地方。因此，通过点击产品（当然，您会进入产品页面），但从同一个自动完成列表中，您也可以直接进入评论或视频。这样可以节省一些点击和滚动操作，让您快速到达想要的位置。

  18. Romans Malinovskis 于 说：

    您好。我们从早期版本就开始使用自动完成功能。（使用 jQuery UI，我们构建了一个在线会计/SaaS 软件，如果您感兴趣，可以访问 http://www.sortmybooksonline.com）。

    我发现了一个似乎经常被忽略的问题。反向 change() 绑定。

    我们的后端允许在字段之间进行各种交互。但是，更改隐藏元素不会反映在自动完成列表中。即使在您的演示中 https://jqueryui.jqueryjs.cn/demos/autocomplete/#combobox，如果您显示隐藏元素并更改该隐藏元素，更改也不会反映在自动完成列表中。

    这实际上是一个大问题，因为此字段可能会在某些情况下动态更改。此问题可以通过反向绑定并执行 hiddenel.val(123).change() 来轻松解决，但它不是默认情况下提供的。

    对于这种行为，是否有全局策略或指南？

    感谢您提供如此棒的框架！