jQuery UI 1.8 中发布的 自动完成小部件 是 jQuery UI 团队的一个非常重要的里程碑。如果您查看了该小部件,您可能已经注意到它只有 四个选项,远少于我们其他插件。与我们选项最少的插件 进度条 不同,自动完成的小 API 不是插件简单性的直接结果。实际上,自动完成非常复杂。
在设计自动完成小部件时,我们以 Jörn Zaefferer 的自动完成插件(它有 21 个选项)为模型。诚然,Jörn 的插件比我们提供的开箱即用的功能更多,但我们较小的 API 一样灵活,并且更容易学习和使用。我们花了大量的思考、讨论和原型设计来将 21 个选项缩减到 4 个。
开箱即用,自动完成通过简单地向 source
选项提供数组或 URL 来为 本地数据源 和 远程(JSON)数据源 提供支持。对 JSONP、XML 和 缓存 的支持都可以用几行代码叠加在上面。
还有一组 由我托管的扩展,它为自动完成小部件提供了额外的选项。 html 选项 (演示) 允许您指定标签应被解释为 HTML 还是文本。还有 selectFirst 选项 (演示),它在菜单显示时会自动激活第一个项目,从而减少选择选项所需的击键次数。 autoSelect 选项 (演示) 允许用户键入一个有效的选项并离开该字段,而无需从菜单中选择该项目。如果用户输入的值有效,则 select 事件将被触发,就像用户从菜单中显式选择该项目一样。我还提供了一个 重音折叠扩展 (演示),使用户更容易选择带有重音字符的值。例如,如果有一个带有文本“Jörn”的项目,用户通常必须键入变音符才能看到该项目。但是,如果加载了重音折叠扩展,用户可以键入“Jorn”,他们仍然会看到结果。
更进一步,您可以使用自定义数据格式并定义自定义显示。例如,您可以 对结果进行分类 或 显示其他信息,例如项目描述和图像。甚至还有一个 可扩展搜索结果 的示例(注意:这只是一个基于 Roman Chyla 的演示 的原型,它不是完整的功能。有关更多详细信息,请参见 论坛主题)。您甚至可以从单个文本字段支持 多个单词。
最后,还有 组合框 演示,它将自动完成功能带到 select 元素。组合框隐藏了 select 元素,而是显示一个文本字段供用户键入。可能的值是通过解析 select 中的选项来确定的,用户可以通过单击文本字段旁边的按钮查看所有选项。有关组合框工作原理的详细说明,请查看 Jörn 在 Learning jQuery 上的文章。