Professional jQuery based Combobox control?

Question

Are there any professional Combobox controls (dropdown list with autosuggestion) based on the jQuery library?

It should be able to handle large datasets and have some skinning options. A multi-column result list would be great too. I'm working with ASP.NET, but it's a not a problem if I had to write a wrapper for it.

alt text

I'm already using a third-party control, but I ran into some compatibilty issues between two vendor's controls. Well, I want to get rid of this kind of dependencies.

were you ever able to find a better answer to this question ? — Element, Feb 10 '09 at 19:44
jQuery's combobox is called 'autocomplete.' https://jqueryui.com/autocomplete/#combobox — AaronJ, Apr 10 '19 at 06:25

score 53 · Answer 1 · answered Feb 02 '09 at 15:59

53

Here's one that looks very promising. It's a true combo - you see what you type. Has a cool feature I haven't seen elsewhere: paging results.

FlexBox

answered Feb 02 '09 at 15:59

GeorgeBarker

991
1
11
7

I will second the FlexBox recommendation. It is has a very, umm, flexible styling and UI options. – Ben Griswold Jul 07 '09 at 18:31
New version (0.9.3) just released. FlexBox now supports client-side JSON filtering. – Noah Heldman Oct 01 '10 at 16:30
1

imo FlexBox is for some cases overkill. – kajo Feb 09 '11 at 11:02
Appears to load all the data (json) at once so may not be appropriate if data source has lots of records – David May 12 '11 at 14:58
If I already select one value, then click arrow it only show the selected value, not all value. – linbo Oct 10 '12 at 11:55

score 25 · Accepted Answer · edited Sep 26 '13 at 15:13

25

Unfortunately, the best thing I have seen is the jquery.combobox, but it doesn't really look like something I'd really want to use in my web applications. I think there are some usability issues with this control, but as a user I don't think I'd know to start typing for the dropdownlist to turn into a textbox.

I much prefer the Combo Dropdown Box, but it still has some features that I'd want and it's still in alpha. The only think I don't like about this other than its being alpha... is that once I type in the combobox, the original dropdownlist items disappear. However, maybe there is a setting for this... or maybe it could be added fairly easily.

Those are the only two options that I know of. Good luck in your search. I'd love to hear if you find one or if the second option works out for you.

edited Sep 26 '13 at 15:13

Timo Huovinen

53,325
33
152
143

answered Oct 13 '08 at 02:12

Elijah Manor

17,923
17
72
79

1

I seem to have compatibility issues with jquery.combobox and jQuery 1.4.x ... as with most plugins that have not been maintained for a long time... – Lukas Eder Mar 02 '11 at 08:22
3

The comment on the first link *'note: at the moment the jquery.combobox behaves as a dropdown list and not a full combbox. it does not currently accept text input.'* kind of defeats the purpose IMO.... – Matthew Dresser Dec 14 '11 at 12:32
1

dead link at sanchezsalvador.com – markashworth Jul 27 '13 at 17:44

score 25 · Answer 3 · answered Apr 10 '11 at 02:42

Anyone looking for a jquery "combo box" seems to be directed to this question. My post is for people coming to this page to find a "traditional" combo box, rather than an answer to the original question. The above solutions all focus on using the input as a means to filtering and autocompleting to an existing select value. (great for large datasets)

If you're looking for the traditional combo box, which is simply "Type something or select from these pre-defined values" (no we won't hide the ones that don't match while you're typing), all you may need to do is

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

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

Should be easy to wrap this into a plugin that converts an existing select tag, though I haven't seen that done yet.

P.S.: The main problem I see with "jQuery Editable Combobox" is that it remains a select list, and it is not obvious at all that you can just start typing something new.

score 15 · Answer 4 · answered Apr 13 '10 at 11:45

15

A new fork of the sexy-combo project is now out which looks promising: http://code.google.com/p/ufd/

answered Apr 13 '10 at 11:45

lomaxx

113,627
57
144
179

I like that it turns a select into a combobox. – beetstra Feb 04 '11 at 01:47
1

After reviewing every suggestion on the page, I settled for this one. Fast, simple, provides just the basic functionality I wanted, and worked on an existing select input – elwyn Apr 15 '11 at 04:10
Can also work with Jquery UI Themeroller – codeulike Sep 05 '11 at 13:33
This one was the biz for me. Works seamlessly on IE7 and IE8, which was a requirement. Infix (mid-word) searching, scroll bars for longer lists, and plays nicely with other components. – Alastair Nov 15 '11 at 11:26
This is by far the easiest to integrate if your existing code uses an old html dropdown. I used this one. – Max Jan 22 '15 at 10:00

score 14 · Answer 5 · answered Jan 08 '09 at 04:55

For large datasets, how about JQuery UI Autocomplete, which is basically the "official" version of Jorn Zaeferrer's Autocomplete plugin?

I also wrote a straight JQuery combobox plugin that's gotten pretty good feedback from its users. It's explicitly not meant for large datasets though; I figure that if you want something that prunes the list based on what the user types, you're better off with Jorn's autocompletion plugin.

Jorn Zaeferrer's Autocomplete plugin is simple and awesome – Jake Wilson Nov 23 '11 at 23:36 — Jake Wilson, Nov 23 '11 at 23:36

score 10 · Answer 6 · answered Apr 09 '09 at 18:36

10

Another nice plugin is Sexy Combo

answered Apr 09 '09 at 18:36

pera

858
12
16

3

This project has stopped active development. – kajo Feb 09 '11 at 10:57
1

See the UFD fork of this: http://stackoverflow.com/questions/195270/professional-jquery-based-combobox-control/2629205#2629205 – codeulike Sep 05 '11 at 13:36

score 7 · Answer 7 · edited Feb 25 '09 at 07:06

7

This is also promising:

JQuery Drop-Down Combo Box on simpletutorials.com

edited Feb 25 '09 at 07:06

splattne

102,760
52
202
249

answered Feb 19 '09 at 23:45

Anthony Kong

37,791
46
172
304

Looks pretty nice, but doesn't support having a different name and value like you can with select – B T Feb 08 '12 at 02:34
1

Also doesn't support two combo boxes on one page. – Tim Saylor Apr 09 '12 at 21:18

Sander Versluys · Answer 8 · 2011-03-02T13:49:56.253

7

An official jQuery UI ComboBox/Autocomplete component is in the making... (previously in beta for jQuery UI 1.5.x), see jQuery UI Wiki

UPDATE:

Autocomplete functionality is now a core feature of jQuery UI, see docs.

edited Mar 02 '11 at 13:49

answered Mar 28 '09 at 14:07

Sander Versluys

72,737
23
84
91

This is now live with jQuery 1.8. I'm using it quite successfully, it's been a well designed widget. – Boldewyn Jun 10 '10 at 11:25
Are you guys experiencing the post effect? When I click the arrow to toggle the list, my page is posted and I get a page refresh... – clockwiseq Sep 09 '10 at 17:53
7

a combobox is not the same as autocomplete – Neil McGuigan Oct 16 '11 at 19:33

mortdale · Answer 9 · 2013-04-04T22:43:08.307

5

If you don't need multi-column, chosen is another good choice. MIT Licensed

edited Apr 04 '13 at 22:43

answered Apr 04 '13 at 22:29

mortdale

382
4
16

+1 for chosen. Looks great and we didn't have to make any changes to existing dropdowns with data coming from an ObjectDatasource. It just works! – Matt Nov 27 '13 at 10:41

score 3 · Answer 10 · answered Jan 27 '10 at 18:27

3

I found this other one: http://code.google.com/p/jquery-jec/

Also seems like a good option.

answered Jan 27 '10 at 18:27

Hugo

6,244
8
37
43

score 3 · Answer 11 · answered Feb 12 '14 at 19:43

3

I like select2, it's feature-rich and nice and active. Particularly like the diacritic search feature.

answered Feb 12 '14 at 19:43

gabor

400
3
12

Word. http://ivaynberg.github.io/select2/ – ethanpil May 12 '14 at 13:30

score 3 · Answer 12 · answered Jun 16 '10 at 00:06

I'm looking for the same. The one I liked most till now is this one for ExtJs - except I havent tested it with large Lists: www.sencha.com/deploy/dev/examples/form/combos.html

Here is another really(!) fast one: http://jsearchdropdown.sourceforge.net/

For example the SexyCombo works quite fantastic but is way to slow for longer lists. The SexyCombo folk UFD is a lot faster, but initialization time is still quite slow for really huge lists. Besides I get sometimes some little! "flashing". But I guess there will be some updates in the near future.

ExtJs works also very well with large (or huge) lists because it supports paging and you can either query the values locally or decide to send the query back to the server and supply another chunk of results. The problem with ExtJs is it's steep learning curve. — stivlo, Jun 09 '11 at 12:50

score 3 · Answer 13 · answered Jun 23 '11 at 18:46

3

Sexy-Combo has been deprecated. Further development exists in the Unobtrusive Fast-Filter Dropdown project. Looks promising, as i have similar requirements.

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

answered Jun 23 '11 at 18:46

penguincoder

547
7
8

Although nice, it seems it doesn't work with jquery > 1.6. Looking for other options. – dan radu Dec 05 '12 at 00:54

score 2 · Answer 14 · answered Sep 29 '09 at 03:41

2

Activewidgets has a very nice looking one. No idea how well it performs on large datasets. http://www.activewidgets.com/ui.combo/

answered Sep 29 '09 at 03:41

Donny V. · Answer 15 · 2010-01-26T21:07:51.237

2

I had the same problem, so I ended up making my own.

It has a template system built in, so you can make the results look like anything you want. Works on all major browsers and accepts arrays & json objects. http://code.google.com/p/custom-combobox/

edited Jan 26 '10 at 21:07

answered Jan 26 '10 at 21:00

Donny V.

22,248
13
65
79

score 2 · Answer 16 · answered Aug 11 '10 at 23:32

2

Here's a really cool one: http://www.xnodesystems.com/ The Dynamic List Field not only has the autocomplete capability, but also is able to do validation.

answered Aug 11 '10 at 23:32

Richard Xiong

21
1

score 2 · Answer 17 · answered Mar 28 '09 at 14:01

2

Why don't you try http://jqueryajax.codeplex.com/. It is a collection of ASP.NET controls that contains multicolumn drop down as well.

answered Mar 28 '09 at 14:01

score 2 · Answer 18 · answered Dec 30 '11 at 12:38

I've tried http://jqueryui.com/demos/autocomplete/#combobox and the problems faced were:

Cross browser rendering
Inability to submit custom value

As a result I've tweaked it a bit and it worked fine for me in ASP.NET MVC. My version of CSS and widget script can be found here http://saplin.blogspot.com/2011/12/html-combobox-control-and-aspnet-mvc.html

Sample on binding MVC model to custom value is also there.

score 1 · Answer 19 · answered May 02 '13 at 15:36

1

Try this one:

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

Very nice with many features including localization.

answered May 02 '13 at 15:36

Chris

11
1

Just working with div also heavy to load – Ali.Mojtahed May 25 '15 at 08:00

score 1 · Answer 20 · answered Nov 13 '13 at 12:58

1

Highly recommending Twitter Typeahead:

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

answered Nov 13 '13 at 12:58

Artur Bodera

1,662
22
20

score 1 · Answer 21 · answered Mar 10 '12 at 02:58

1

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

answered Mar 10 '12 at 02:58

arieltools

1,136
3
15
21

score 0 · Answer 22 · answered Dec 14 '10 at 05:41

0

all what you need http://jquerycomboboxtmpl.codeplex.com/

drop-down on templates

answered Dec 14 '10 at 05:41

rootkit

21

Please add some explanation at least for the solution you are suggesting and why it fits the criteria from the question. – mtsr Dec 04 '12 at 21:39

Professional jQuery based Combobox control?

22 Answers22

Linked

Related