Like the JavaScript date chooser, I created this after searching the Internet for something to accomplish what I needed. Most of what I found was very complex; it dynamically overlaid select menus with text intputs and so forth. And most of it wasn’t free, which is absurd. The rest was not suitable for what I needed. So I wrote my own.
To use the combo box, all you have to do is type into the SELECT menu below. Your keystrokes will create a new option at the end of the list. When you are done typing, press enter to exit “edit mode;” you can use backspace and enter, but otherwise all non-printable keystrokes are ignored.
I’m aware of some bugs:
- Opera will report the up and down arrow as parentheses and ampersands.
- Some Mozilla browsers won’t immediately select the new option you are creating, if the text you enter begins with the same letter as an existing option; the second keystroke will select the new option.
Any fixes for these or other problems are gratefully received.
Technorati Tags:No Tags
Just a quick note, Konqueror exhibits the following problems:
If I get a chance I’ll fix these someday.
Wow.
this is not actually a combo box, CRAP
Of course not. There’s no such thing in HTML. It’s a fake combo box — that’s as good as it gets :-)
Works in IE and Firefox. Much better than the clumsy one I made myself. Good job! It will be soon going into my site in a few places. Thanks.
Just what I’m looking for! Great idea to use keypress events!
It would be nice if the cursor changed to a text insertion cursor when hovering over the text area, but to the normal cursor over the drop-down arrow. I don’t think that’s possible, though. Next best would be to change the cursor when they start typing and change it back when they start clicking. Should be something even a novice like me can manage.
Thanks!
I had a look at the code, and I’m more impressed now — Less than a page with the copyright taken out. I couldn’t believe that’s all there was to it!
Great idea to just use the select. When I tried to do this, I had a text and a select that alternated being hidden.
Again, great job. Thanks.
Very smooth…!! well done. Another problem with it, is if you’ve got a long list and you want to search for an option by pressing a key, it adds a new record. Would be great to have it switch between “edit” and “display” modes too, though not sure what would be an intuitive way to do this. (Double-clicking is just a bit odd with a select list)
Simple and free. It is what I want.
Is there any way to fix the width so it doesn’t change size?
Certainly. Just style the SELECT with CSS.
Just a quick note, here’s a good article on building an accessible combo box (based on a combo box presented at particletree). The widget presented in the Digital Web article has some advantages over what I’ve done (accessibility), though the one at Particle Tree is very similar to mine.
Haven’t looked at the code, but CB breaks in Mozilla when you hit the delete key. If you delete characters after typing in the CB, one more delete press will invoke the browser back button. Also, CB doesn’t show text cursor when typable. Nice work on the combo box. I’d like to see a cross browser inplementation.
I can’t write some national characters what I need. eg: ß or áéóü
Looks great. I got one problem in IE. If i try to get the value of the new entry in the select box using a Java Script function ie. document.forms[0].editable.value; it is not giving anything. But in Mozilla it gives the new value entered. Any observations on this?
This is exactly what I have been looking for. For my application, this works better than the one you sited above — this is a bit more intuitive from the user’s perspective. Thank you for making it available.
Great solution! That’s how code should be written, short and to the point.
If I may, here is a Firefox compatibility fix:
Issue - Firefox back button is invoked when pressing delete and the combobox has a zero-length string.
Cause - Firefox does not recognize the ‘window.event’ object, instead it looks for the event to be passed through the function parameter.
To resolve - Modify the onkeydown event wiring as follows:
document.onkeydown = function(e) {
var windowEvent = (e) ? e : window.event;
if (combo && combo.editing && windowEvent && windowEvent.keyCode == 8) {
windowEvent.cancelBubble = true;
windowEvent.returnValue = false;
if (combo.insertSpace) {
combo.insertSpace = false;
}
else {
with (combo.options[combo.options.length - 1]) {
text = text.substring(0, text.length - 1);
}
}
}
}
Is there a way to edit values already entered.