专业的基于jQuery的下拉框控件？

Question

有基于jQuery库的任何专业下拉列表（带自动建议）控件吗？

它应该能够处理大型数据集并具有一些皮肤选项，一个多列结果列表也很棒。我正在使用ASP.NET，但如果需要编写包装器，则不是问题。

我已经在使用第三方控件，但我遇到了两个供应商控件之间的兼容性问题。好吧，我想摆脱这种依赖关系。

- splattne

---

你能否找到这个问题的更好答案了吗？ - Element

看看下面GeorgeBarker的回答。 - splattne

jQuery的组合框被称为“自动完成”。https://jqueryui.com/autocomplete/#combobox - AaronJ

Answer 1

这个看起来非常有前途。它是一种真正的组合 - 你输入什么就能看到什么。还有一个很酷的功能，我在其他地方没有见过：分页结果。

FlexBox

- GeorgeBarker

---

我会支持FlexBox的建议。它具有非常灵活的样式和UI选项。 - Ben Griswold

新版本（0.9.3）刚刚发布。FlexBox现在支持客户端JSON过滤。 - Noah Heldman

我认为在某些情况下，FlexBox 是过度设计了。 - kajo

似乎一次性加载所有数据（json），因此如果数据源有大量记录可能不适合。 - David

如果我已经选择了一个值，然后点击箭头，它只会显示所选的值，而不是所有的值。 - linbo

Answer 2

寻找jquery "combo box"的人似乎会被引导到这个问题。我的帖子是为了那些来到这个页面寻找“传统”组合框而不是回答原始问题的人们而写的。以上解决方案都集中在使用输入作为一种手段来过滤和自动完成现有选择值（非常适用于大型数据集）。

如果您正在寻找传统的组合框，即"键入一些内容或从这些预定义的值中选择"（当您键入时不会隐藏不匹配的值），则可能只需要做以下操作：

<select id="combo4" style="width: 200px;"
            onchange="$('input#text4').val($(this).val());">
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>
<input id="text4"
       style="margin-left: -203px; width: 180px; height: 1.2em; border: 0;" />

参考http://bit.wisestamp.com/uncategorized/htmljquery-editable-combo-2/

把这个应用封装成一个插件来转换现有的选择标签应该很容易，虽然我还没有见过这样做。

附：我认为“jQuery可编辑组合框”的主要问题在于它仍然是选择列表，并且并不明显你可以开始输入新内容。

- Danny W. Adair

---

http://jsfiddle.net/X657V/ - bancer

Answer 3

很不幸，我看到的最好的东西是jquery.combobox，但它不像是我真正想在我的 Web 应用程序中使用的东西。我认为这个控件存在一些可用性问题，但作为用户，我不认为我会知道开始输入以便下拉列表框变成文本框。

我更喜欢组合下拉框，但它仍然有一些我想要的功能，并且还处于 alpha 版本。唯一让我不喜欢的是，一旦我在组合框中输入，原始的下拉列表项就会消失。但是，也许有一个设置可以解决这个问题……或者可能很容易地添加这个功能。

这是我所知道的唯一两个选项。祝你在寻找中好运。如果你找到了一个或第二个选项适合你，请告诉我，我很乐意听到这个消息。

- Elijah Manor

---

我似乎在使用jquery.combobox和jQuery 1.4.x时遇到了兼容性问题... 这与大多数长时间未得到维护的插件一样... - Lukas Eder

第一个链接中的评论是：“注意：目前jquery.combobox的行为类似于下拉列表而不是完整的组合框。它目前不能接受文本输入。” 我认为这有点违背了其原本的设计目的。 - Matthew Dresser

sanchezsalvador.com的链接已失效。 - markashworth

Answer 4

一个新的sexy-combo项目的分支现在已经发布，看起来很有前途：http://code.google.com/p/ufd/

- lomaxx

---

我喜欢它将选择框转换为组合框。 - beetstra

在查看了页面上的每个建议之后，我选择了这个。它快速、简单，提供了我想要的基本功能，并且可以在现有的选择输入上工作。 - elwyn

可以与Jquery UI Themeroller一起使用。 - codeulike

这个对我来说非常好。在IE7和IE8上无缝运行，这是一个要求。中缀（单词中间）搜索，长列表的滚动条，并且与其他组件很好地协作。 - Alastair

这是目前为止最容易集成的，如果您现有的代码使用旧的HTML下拉菜单。我用了这个。 - Max

Answer 5

针对大型数据集，您可以考虑使用JQuery UI Autocomplete，它基本上是Jorn Zaeferrer的Autocomplete plugin的“官方”版本。

我还编写了一个直接的JQuery combobox插件，得到了用户的很好反馈。但是，它明确地不适用于大型数据集；如果您想要根据用户输入修剪列表的内容，最好使用Jorn的自动完成插件。

- Jonathan Tang

---

Jorn Zaeferrer的自动完成插件简单而棒。 - Jake Wilson

Answer 6

另一个不错的插件是 Sexy Combo 。

- pera

---

这个项目已停止主动开发。 - kajo

请查看此 UFD 分支：https://dev59.com/THVC5IYBdhLWcg3wvT_g#2629205 - codeulike

Answer 7

一个官方的jQuery UI ComboBox/Autocomplete组件正在制作中...(之前在jQuery UI 1.5.x的测试版中)，请参见jQuery UI Wiki 更新:

Autocomplete功能现在是jQuery UI的核心功能，请参阅文档。

- Sander Versluys

---

这现在已经使用jQuery 1.8实现了。我正在成功地使用它，这是一个设计良好的小部件。 - Boldewyn

你们有没有遇到后效应的问题？当我点击箭头切换列表时，我的页面被提交并重新加载了... - clockwiseq

组合框（combobox）和自动完成（autocomplete）不同。 - Neil McGuigan

Answer 8

这也很有前途：

在simpletutorials.com上的JQuery下拉组合框

- Anthony Kong

---

看起来很不错，但是不支持像<select> <options>那样具有不同名称和值的功能。 - B T

同时不支持在同一页上使用两个组合框。 - Tim Saylor

Answer 9

如果您不需要多列，Chosen 是另一个不错的选择。采用 MIT 许可证。

- mortdale

---

+1，看起来很棒，我们不需要对来自ObjectDatasource的数据下拉列表进行任何更改。它只是有效地工作！ - Matt

Answer 10

我正在寻找相关的编程内容翻译，到目前为止我最喜欢的一个是这个ExtJs - 除了我还没有用大型列表测试它： www.sencha.com/deploy/dev/examples/form/combos.html

这里有另外一个真正快速的选择： http://jsearchdropdown.sourceforge.net/ 例如，SexyCombo的效果非常好，但对于较长的列表来说速度太慢了。 SexyCombo Folk UFD更快，但初始化时间对于真正巨大的列表仍然相当缓慢。 此外，有时会出现一些小的“闪烁”。 但我想在不久的将来会有一些更新。

- Sithlord

---

ExtJs非常适合处理大型（或巨大的）列表，因为它支持分页，您可以在本地查询值，也可以决定将查询发送回服务器并提供另一批结果。 ExtJs的问题在于其陡峭的学习曲线。 - stivlo