超过 300 行的下拉列表的最佳解决方案？答案

【问题标题】：Best solution for a drop down list with over 300 rows?超过 300 行的下拉列表的最佳解决方案？
【发布时间】：2012-01-24 08:12:16
【问题描述】：

我有这个问题，在一个表格中，我有一个可能超过 300 名的客户列表，对我来说，在那里查找并不是很简单，因为我应该滚动所有结果以查找单行！

在旧技术上，我有一个按钮可以打开一个弹出窗口，在那里我应该研究我应该选择哪个客户，然后我使用 javascript 来记录第一个表单上的选择，但这可能是新技术的一个很好的解决方案！

我该如何解决这个疑问？大<select>标签的最佳解决方案是什么？

【问题讨论】：

考虑将您的问题发布到ux.stackexchange.com

标签： html jsf-2 accessibility usability

【解决方案1】：

您基本上想要一个自动完成下拉列表。这在标准 JSF 组件集中不存在，并且在标准 JSF 组件集之上使用 JavaScript/jQuery 实现也不是很简单，因为可用值必须存在于服务器端的状态中。您基本上还需要一个由<div><input><ul><li> 而不是<select><option> 表示的下拉列表，因为普通的<select> 不允许最终用户输入文本。标准JSF 组件集没有呈现的组件所需的 HTML 标记。您基本上需要创建一个自定义 JSF 组件。

有 3rd 方 JSF 组件库已经提供了完整的 JSF 自动完成下拉列表。使用它们中的任何一个都更容易，而不是通过自定义 JSF 组件重新发明轮子。任君挑选：

【讨论】：

【解决方案2】：

你可以试试 jquery ajax 自动完成

参考：

http://docs.jquery.com/Plugins/Autocomplete

http://jqueryui.com/demos/autocomplete/

【讨论】：

请注意，OP 是根据问题标签使用 JSF，这是一个基于有状态组件的 MVC 框架。实现 jQuery 并非易事，因为您还必须考虑服务器端状态。您宁愿为此使用 JSF 组件。

【解决方案3】：

是的，当您拥有大量项目时，jQuery 自动完成插件是您的最佳解决方案。

顺便说一下，假设您想选择一个带有特定字母的项目。当您使用下拉列表时，您可以通过从每个项目的第一个字母开始键入它们的名称来指向您想要的项目。但是使用 jQuery 自动完成，您可以在任何地方搜索一个字符串或一组字母。插入的字母是位于项目名称的第一个还是其他位置都没有关系。

正如 ShantanuD 所说，你可以在 http://jqueryui.com/demos/autocomplete/ 找到这个插件

【讨论】：