专业的基于jQuery的Combobox控件?

时间:2008-10-12 09:18:53

标签: javascript jquery combobox controls

是否有基于jQuery库的专业 Combobox控件(带自动提示的下拉列表)?

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

alt text

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

22 个答案:

答案 0 :(得分:53)

这是一个看起来很有前途的人。这是一个真正的组合 - 你看到你键入的内容。有一个很酷的功能,我没有在别处看到过:分页结果。

FlexBox

答案 1 :(得分:24)

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

我更喜欢Combo Dropdown Box,但它仍然有一些我想要的功能,它仍然是alpha。唯一的想法是我不喜欢这个而不是它的alpha ...就是一旦我输入组合框,原始的下拉列表项就会消失。但是,也许有一个设置...或者它可以很容易地添加。

这是我所知道的唯一两个选项。祝你的搜索顺利。如果您找到一个或者第二个选项适合您,我很想听听。

答案 2 :(得分:24)

任何寻找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/

应该很容易将它包装成一个转换现有select标签的插件,尽管我还没有看到它已经完成。

P.S。:我在“jQuery Editable Combobox”中看到的主要问题是它仍然是一个选择列表,并且你可以开始输入新内容并不明显。

答案 3 :(得分:15)

性感组合项目的新分支现在看起来很有希望:http://code.google.com/p/ufd/

答案 4 :(得分:14)

对于大型数据集,如何JQuery UI Autocomplete,这基本上是Jorn Zaeferrer Autocomplete plugin的“官方”版本?

我还写了一个直接的JQuery combobox插件,它的用户得到了很好的反馈。它显然适用于大型数据集;我想如果你想要根据用户输入的内容修剪列表,你最好使用Jorn的自动完成插件。

答案 5 :(得分:10)

另一个不错的插件是Sexy Combo

答案 6 :(得分:7)

这也很有希望:

simpletutorials.com上的

JQuery Drop-Down Combo Box

答案 7 :(得分:7)

官方jQuery UI ComboBox / Autocomplete组件正在制作中......(以前是jQuery UI 1.5.x的测试版),请参阅jQuery UI Wiki

更新:

自动填充功能现在是jQuery UI的核心功能see docs

答案 8 :(得分:5)

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

答案 9 :(得分:3)

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

答案 10 :(得分:3)

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

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

答案 11 :(得分:3)

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

这是另一个真正的(!)快速的: http://jsearchdropdown.sourceforge.net/

例如,SexyCombo的作品非常精彩,但却很慢 更长的名单。 SexyCombo民间UFD速度要快很多,但对于真正庞大的列表,初始化时间仍然很慢。 除此之外我有时会得到一点点! “闪烁”。 但我想在不久的将来会有一些更新。

答案 12 :(得分:3)

我发现了另外一个:http://code.google.com/p/jquery-jec/

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

答案 13 :(得分:2)

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

答案 14 :(得分:2)

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

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

答案 15 :(得分:2)

我已经尝试了http://jqueryui.com/demos/autocomplete/#combobox,所面临的问题是:

  • 跨浏览器呈现
  • 无法提交自定义值

结果我稍微调了一下它在ASP.NET MVC中对我来说很好。我可以在http://saplin.blogspot.com/2011/12/html-combobox-control-and-aspnet-mvc.html

找到我的CSS和widget脚本版本

将MVC模型绑定到自定义值的示例也在那里。

答案 16 :(得分:2)

Activewidgets看起来很漂亮。不知道它在大型数据集上的表现如何。 http://www.activewidgets.com/ui.combo/

答案 17 :(得分:2)

为什么不试试http://jqueryajax.codeplex.com/。它是一组ASP.NET控件,包含多列下拉列表。

答案 18 :(得分:1)

答案 19 :(得分:1)

试试这个:

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

非常好用很多功能,包括本地化。

答案 20 :(得分:1)

强烈推荐Twitter Typeahead:

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

答案 21 :(得分:0)

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

模板下拉