I've been making tweaks to my ComboBox widget (first published in July 2005) in various apps of mine that use it, and figured it was time to publish an update. You can download the archive at /web/widgets/widgets-b2218.zip, play with the online demo (which is just the expanded archive) at /web/widgets/, or visit the project page for most info. I believe I've fixed every bug that people have brought to my attention, but if I missed something, let me know.
New and notable features (in no particular order):
- multiple delimited values (defaults to comma delimited)
- the ESC key will now close the dropdown, if it's open
- the TAB key will select the current value and move focus off the combobox
- automatic hiding of SELECT, APPLET, and EMBED elements under the dropdown (for IE)
- automatic setting of autocomplete="off"
- changed to update only ever 250ms, rather than on every key press, which greatly reduces needless churn with JS remoting-based dropdowns
- added "Loading …" message while waiting for dropdown values (for JS remoting-based dropdowns)
- removal of already-selected items from the dropdown (only useful for multi-select)
- added wrapping with the arrow keys (pressing 'up' when the first item is selected will move the selection to the last item)
- support for arbitrary HTML in the dropdown values that will be stripped to create the actual form field value
There are a few known issues:
- if your dropdown is larger than it's allowed side, scrollbars will appear, but the scrolling won't reset when new items are loaded
- untested on IE aside from a few spot checks. However, except for the hiding of SELECT/APPLET/EMBED elements (which is fixed), I've not received any IE-specific complaints, so I'd say it's pretty sound.
- documentation is somewhat lacking.
I'm sure I'm missed some, but those are the high points. As always, it's MIT licensed so you can basically do whatever. If you find it useful (or think it's a piece of garbage), I'd love to hear about it.
Hey Barney – I was just wondering if your widget will support entering special characters, such as %, #, &, etc. I have tried Nitobi and found a couple of flaws in it concerning these characters, which have become show stoppers for me, leaving me looking for a differnet solution. Also having weird querying issues when typing past a #sign, particularly in Firefox. Try link below in IE and FF.
http://dev.freightrak.com/CommonFiles/Objects/ComboBox/Test_BasicCombo.asp
I'm also wondering if you have considered placing a arrow to the right for the user to click and select an item from a regular list (e.g. TOP 20 Customers or something loaded upon initializing of the box).
Dave
Dave,
The widget should support any character you can type, assuming your backend implementation supports it. The only exception is your delimiter character if you've configured it for multi-value mode (where you can enter a list of values, and each one gets independent completion).
I don't really have plans to do much with the widget. I kind of misnamed it. It's not really a combobox, but more an autocompleter. In that regard it's quite functional, and while it's not quite as polished as others (such as the one in Scriptaculous (http://script.aculo.us/), there are a couple edge cases I've run into that it works better for. That has probably changed as others have upgraded, of course. Mine is over two years old.
Adding an explicit trigger (the down arrow) to fire the autocomplete machinery at a time other than when typing triggers it should be pretty trivial. You'll just need to invoke valueChanged on the ComboBox object when the user clicks the arrow. You'll probably need to supply some custom logic in your option-generating callback to handle empty values and generate the top 20 list, but that's a snap. None of the ComboBox code itself should require modification.