Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this 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.
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.
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
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.
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.
A new fork of the sexy-combo project is now out which looks promising: http://code.google.com/p/ufd/
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.
Another nice plugin is Sexy Combo
This is also promising:
JQuery Drop-Down Combo Box on simpletutorials.com
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.
If you don't need multi-column, chosen is another good choice. MIT Licensed
I found this other one: http://code.google.com/p/jquery-jec/
Also seems like a good option.
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.
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/
I like select2, it's feature-rich and nice and active. Particularly like the diacritic search feature.
Why don't you try http://jqueryajax.codeplex.com/. It is a collection of ASP.NET controls that contains multicolumn drop down as well.
Activewidgets has a very nice looking one. No idea how well it performs on large datasets.
http://www.activewidgets.com/ui.combo/
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/
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.
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.
http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
Try this one:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/index.htm
Very nice with many features including localization.
Highly recommending Twitter Typeahead:
http://twitter.github.io/typeahead.js/
all what you need
http://jquerycomboboxtmpl.codeplex.com/
drop-down on templates
Related
I have a web form which has the user input the values of certain characteristics, however some of the characteristics have up to 45000 values.
The selects were working earlier, albeit with a slight amount of lag when populating the dropdown and trying to scroll through it fast, but now it does not populate at all and the web form hangs.
Is there a way to efficiently contain this many values into a dropdown? Also which is the best library for searchable comboboxes?
I looked at this implementation as it has a "load on open" feature which I thought might be beneficial, but it did not seem to work and is no longer actively developed.
http://john-oc.github.io/
Thanks
Perhaps it would be better to use an autocomplete feature instead of a select menu in this case. A user can type in the first few characters, causing a request to start filtering results based on their input.
Here are a couple of really good autocomplete plugins:
https://github.com/devbridge/jQuery-Autocomplete
Roll your own:
http://www.webreference.com/programming/javascript/rg16/index.html
I agree with Todd, I think you might want some solution that has autocomplete to hide too many results. I'd even go a step further and suggest bootstrap DataTables: https://datatables.net/manual/styling/bootstrap
You can make searchable tables with this, with the key advantage being that it paginates results, so you don't see it all at once.
I'm a big fan of https://github.com/angular-ui/ui-select. You can have it make a request based on the current text input, and then populate the dropdown.
Since the question is already answered, please let me just contribute here.
You can use the typeaheads from angularStrap to achieve this. Beyond the easy manipulation of data, you can even use to make async calls using data provider.
I've being working with a lot of WPF, and I used a lot of listviews to convey information. I wanted to create something like a detailed listview.
An example of what I'm looking for is the "listview" type interface on Facebook's newsfeed, or even Stack Overflow's question browsing list.
The data will come from an XML document. So far my solution was to use divs within divs, but unfortunately it ended up being very messy. I also tried making them with tables and then hiding the table borders (which worked to an extent) but I'm sure there must be a better way! I also heard using tables is not a very good way to do it.
I'm not even sure if the word "Listview" is the right term to describe what I'm trying to talk about. If there's a different term can you please also answer that so that I can search for that on Google too (because I've only been searching for Listview's in HTML/Javascript).
Thanks.
You can try listview plugins with ExtJs or Jquery.
Here's the listView example / doc from Jquery mobile
http://jquerymobile.com/test/docs/lists/docs-lists.html
Listview would be the term to identify the structure. The best possible way to implement it would be to use an un-ordered list ex: and style it with CSS. Its simple and not too messy.
Quickish issue. I'm currently working with RoR with a great deal of Javascript for a project. I have a particular entity that has a "color" property. Of course I want to do this as "snazzily" (yup that's a word) as possible, however, I'm not sure how to go about it. I've seen a million and one different "Color Pickers" but none seem to fit the overall bill.
My current paradigm involves editing the entities from the "Index" page instead of having to click "Edit" for each and every one. I've got that working for several fields. What I need to implement now is a quality ColorPicker that doesn't take up too much screen real estate and/or hides itself after being presented.
So, all that said, can someone point me to some quality JS techniques for dealing with "pop-ups" and/or window return values? I'd like to really understand what needs to occur as well, so a tutorial would be nice.
Much appreciated.
Did you look at jquery and the jquery-ui tools?
This is one of the jquery-plugins http://www.eyecon.ro/colorpicker/
I was looking at what YUI had, http://developer.yahoo.com/yui/examples/button/btn_example07.html
Can anyone recommend a library/plugin they used to progressively enhance native select element dropdowns at the request of a client? I know it's impossible to style a dropdown in IE, so it's either this or Flash which I don't want to get into.
I'll still leave the regular dropdown in the source for non-JS users and serve the dropdown replica built out of non-form control elements.
Assuming you mean a different library than YUI, I like dojo's dijit.form.FilteringSelect.
Turns out it wasn't all that difficult, pretty much the same logic as a dropdown menu except with a little extra for the toggling bit.
I'm looking to utilize jQuery to handle a few very common requests we get for data tables of varying sizes: scrolling, sorting, and dynamic filtering.
I've handled scrolling in the past by having two separate tables with fixed width columns, along with associated div containers for the "actual" scrolling. However, this method doesn't work with any of the jQuery-based sorting table extensions that I've come across (tablesorter being my favorite so far) as they want everything in a single table.
For filtering, they're requesting something akin to how Excel and SharePoint lists do it (basically all column values are listed in a dropdown, allowing the user to select/deselect them). I haven't seen anything like that yet, although it sounds possible.
One other related nice-to-have feature would be the ability to "freeze" a column for horizontal scrolling.
Ideally I'd like an existing extenstion, but if none are out there I'd also appreciate suggestions from any jQuery gurus on how to best implement it. My current thoughts are to dive into tablesorter and extend/update it as necessary.
To hopefully keep things focused, paging is not an option (along with anything server based, for that matter).
Update:
I do appreciate the answers so far, but none of the options given so far touch on the filtering aspect at all (that said, I must admit that jqGrid looks very good for some future projects I have). In the meantime I'll work on a custom filtering solution; if it works out I'll update again.
I came across this question as I was searching for a sortable table plugin myself; I really wasn't impressed with any of the suggested widgets, but later I discovered DataTables, and I was quite impressed. I recommend checking it out.
Maybe this excellent plug-in could do it:
Demo page
It's called jQGrid, here is the project page:
http://plugins.jquery.com/project/jqGrid
I would encourage you to try out the Flexigrid.
It has a lot of great features and I personally think it looks more professional than the jqGrid.
It doesn't have some of the features that you asking for, but I think it could be a good start. It would be great if you could work on adding some of those features to the code base.
If you are coding in c#, then I posted a blog entry about how to use LINQ to Reflection to bind JSON to the Flexigrid... if you are using another language there are other examples you can find on Flexigrid's Website & Google Group page.
a simple jQuery Scrollable Table Plugin
As mentioned in my update, I ended up using a custom filtering extension (closed source, unfortunately). I've recently started using SlickGrid and it's now my go-to grid.
I'd like to add the Laravel flavored DataTables (GitHub, jquery DataTables API) - perfect if you already work with PHP/Laravel.
Extra, koalyptus/TableFilter another custom filter table (actually, my fav).