专业的基于 jQuery 的 Combobox 控件？ [关闭]

Posted 2023-02-22

【中文标题】专业的基于 jQuery 的 Combobox 控件？ [关闭]

【英文标题】：Professional jQuery based Combobox control? [closed]

【发布时间】：2010-09-16 18:04:45

【问题描述】：

有没有基于 jQuery 库的专业组合框控件（带有自动提示的下拉列表）？

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

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

【问题讨论】：

你有没有找到更好的答案来回答这个问题？

看看下面 GeorgeBarker 的回答。

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

【参考方案1】：

这是一个看起来很有前途的。这是一个真正的组合 - 你会看到你输入的内容。有一个我在其他地方没有见过的很酷的功能：分页结果。

FlexBox

【讨论】：

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

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

imo FlexBox 在某些情况下是多余的。

似乎一次加载所有数据（json），因此如果数据源有很多记录，则可能不合适

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

【参考方案2】：

任何寻找 jquery“组合框”的人似乎都被定向到这个问题。我的帖子是为来到此页面的人们寻找“传统”组合框，而不是原始问题的答案。上述解决方案都侧重于使用输入作为过滤和自动完成现有选择值的手段。 （非常适合大型数据集）

如果您正在寻找传统的组合框，它只是“键入内容或从这些预定义的值中选择”（不，我们不会在您键入时隐藏不匹配的组合框），您可能需要做的就是

<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/

应该很容易将它封装到一个转换现有选择标签的插件中，尽管我还没有看到这样做。

P.S.：我看到的“jQuery Editable Combobox”的主要问题是它仍然是一个选择列表，而且你可以开始输入新的东西并不明显。

【讨论】：

jsfiddle.net/X657V

【参考方案3】：

不幸的是，我见过的最好的东西是jquery.combobox，但它看起来并不是我真正想在我的网络应用程序中使用的东西。我认为此控件存在一些可用性问题，但作为用户，我认为我不知道要开始输入下拉列表以变成文本框。

我更喜欢Combo Dropdown Box，但它仍然有一些我想要的功能，而且它仍处于 alpha 阶段。除了它是 alpha 之外，我唯一不喜欢这个的想法是，一旦我在组合框中输入，原来的下拉列表项就会消失。但是，也许有一个设置......或者它可以很容易地添加。

这是我所知道的仅有的两个选项。祝您搜索顺利。我很想知道你是否找到了一个，或者第二个选项是否适合你。

【讨论】：

我似乎对 jquery.combobox 和 jQuery 1.4.x 有兼容性问题......就像大多数长时间没有维护的插件一样......

第一个链接上的评论 '注意：此时 jquery.combobox 表现为下拉列表，而不是完整的组合框。它目前不接受文本输入。'有点违背IMO的目的......

sanchezsalvador.com 上的死链接

【参考方案4】：

sexy-combo 项目的新分支现已推出，看起来很有希望：http://code.google.com/p/ufd/

【讨论】：

我喜欢它把一个选择变成一个组合框。

在查看了页面上的每一条建议后，我选择了这个。快速、简单，只提供我想要的基本功能，并且处理现有的选择输入

也可以与 Jquery UI Themeroller 一起使用

这个是我的生意。在 IE7 和 IE8 上无缝工作，这是一个要求。中缀（中间词）搜索，滚动条用于更长的列表，并且与其他组件很好地配合。

如果您现有的代码使用旧的 html 下拉菜单，这是迄今为止最容易集成的。我用过这个。

【参考方案5】：

对于大型数据集，JQuery UI Autocomplete 怎么样，它基本上是 Jorn Zaeferrer 的Autocomplete plugin 的“官方”版本？

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

【讨论】：

Jorn Zaeferrer 的自动完成插件既简单又很棒

【参考方案6】：

另一个不错的插件是Sexy Combo

【讨论】：

此项目已停止积极开发。

查看 UFD 分支：***.com/questions/195270/…

【参考方案7】：

这也很有希望：

JQuery Drop-Down Combo Boxsimpletutorials.com

【讨论】：

看起来不错，但不支持像 select

那样使用不同的名称和值

也不支持一页有两个组合框。

【参考方案8】：

一个官方的 jQuery UI ComboBox/Autocomplete 组件正在制作中...（之前是 jQuery UI 1.5.x 的测试版），请参阅jQuery UI Wiki

更新：

自动完成功能现在是 jQuery UI 的核心功能，see docs。

【讨论】：

现在支持 jQuery 1.8。我使用它非常成功，它是一个精心设计的小部件。

你们体验过后期效果吗？当我单击箭头切换列表时，我的页面被发布并且我得到了页面刷新......

组合框与自动完成不同

【参考方案9】：

如果您不需要多列，chosen 是另一个不错的选择。麻省理工学院许可

【讨论】：

+1 表示已选择。看起来很棒，我们不必使用来自 ObjectDatasource 的数据对现有下拉列表进行任何更改。它只是工作！

【参考方案10】：

我找到了另一个：http://code.google.com/p/jquery-jec/

似乎也是一个不错的选择。

【参考方案11】：

我也在寻找同样的东西。 到目前为止，我最喜欢的是 ExtJs 的这个——除了我没有用大列表测试过它： www.sencha.com/deploy/dev/examples/form/combos.html

这是另一个非常（！）快的： http://jsearchdropdown.sourceforge.net/

例如，SexyCombo 的效果非常棒，但速度慢 更长的列表。 SexyCombo 民间 UFD 快得多，但对于非常大的列表，初始化时间仍然很慢。 此外，我有时会得到一些小东西！ “闪烁”。 但我猜在不久的将来会有一些更新。

【讨论】：

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

【参考方案12】：

Sexy-Combo 已被弃用。 Unobtrusive Fast-Filter Dropdown 项目中存在进一步的发展。看起来很有希望，因为我有类似的要求。

https://code.google.com/p/ufd/

【讨论】：

虽然不错，但它似乎不适用于 jquery > 1.6。寻找其他选择。

【参考方案13】：

我喜欢select2，它功能丰富、美观且活跃。特别喜欢diacritic 搜索功能。

【讨论】：

字。 ivaynberg.github.io/select2

【参考方案14】：

你为什么不试试http://jqueryajax.codeplex.com/。它是一个包含多列下拉菜单的 ASP.NET 控件集合。

【参考方案15】：

Activewidgets 有一个非常漂亮的。不知道它在大型数据集上的表现如何。 http://www.activewidgets.com/ui.combo/

【参考方案16】：

我遇到了同样的问题，所以我最终自己制作了。

它内置了模板系统，因此您可以使结果看起来像您想要的任何东西。 适用于所有主要浏览器并接受数组和 json 对象。 http://code.google.com/p/custom-combobox/

【参考方案17】：

这是一个非常酷的：http://www.xnodesystems.com/动态列表字段不仅具有自动完成功能，还可以进行验证。

【参考方案18】：

我试过http://jqueryui.com/demos/autocomplete/#combobox，遇到的问题是：

跨浏览器渲染 无法提交自定义值

因此，我对其进行了一些调整，它在 ASP.NET MVC 中对我来说运行良好。我的 CSS 和小部件脚本版本可以在这里找到http://saplin.blogspot.com/2011/12/html-combobox-control-and-aspnet-mvc.html

还有将 MVC 模型绑定到自定义值的示例。

【参考方案19】：

http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

【参考方案20】：

试试这个：

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/index.htm

非常好，包括本地化在内的许多功能。

【讨论】：

只使用 div 也很重负载

【参考方案21】：

强烈推荐 Twitter Typeahead：

http://twitter.github.io/typeahead.js/

【参考方案22】：

所有你需要的 http://jquerycomboboxtmpl.codeplex.com/

模板下拉

【讨论】：

请至少为您建议的解决方案添加一些解释，以及为什么它符合问题的标准。