JavaScript combo box
If you have questions or comments or bugs report, or a change to make, be sure to use the project’s new homepage: Flexible JS Formatting Libraries
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.
Just a quick note, Konqueror exhibits the following problems:
If I get a chance I’ll fix these someday.
Xaprb
5 Jan 06 at 11:18 am
Wow.
Anonymous
3 Feb 06 at 5:23 am
this is not actually a combo box, CRAP
jhajjhjha
11 May 06 at 4:48 am
Of course not. There’s no such thing in HTML. It’s a fake combo box — that’s as good as it gets :-)
Xaprb
11 May 06 at 8:13 am
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.
Dan
31 May 06 at 11:32 am
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!
ALittleSlow
2 Jun 06 at 11:56 am
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.
Dan
5 Jun 06 at 12:36 pm
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)
Adam
20 Jun 06 at 7:06 am
Simple and free. It is what I want.
Anthony Nguyen
25 Jun 06 at 2:59 pm
Is there any way to fix the width so it doesn’t change size?
Phil
26 Jul 06 at 5:32 pm
Certainly. Just style the SELECT with CSS.
Xaprb
26 Jul 06 at 6:37 pm
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.
Xaprb
26 Jul 06 at 6:42 pm
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.
Paul Hermany
9 Sep 06 at 6:06 am
I can’t write some national characters what I need. eg: ß or áéóü
keep
25 Sep 06 at 3:20 pm
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?
Mathew
24 Apr 07 at 7:22 am
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.
jj
27 Apr 07 at 10:59 am
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);
}
}
}
}
RojoSanKa
10 Jan 08 at 1:58 pm
Is there a way to edit values already entered.
Richard
9 May 08 at 11:15 am
I had an issue with IE6, it was not returning this.value.
To fix this problem, at the end of each with() block, add this line: value = text;
Thank you so much for this code!!
Robert
23 Jul 08 at 1:06 pm
Sorry – couldn’t get the typed value to be submitted with the form, even using the value = text; addition.
I must have been missing something else.
Thanks for this interesting approach.
-Marc Lee
Marc Lee
8 Sep 08 at 5:14 pm
Is there a way to add cyrillic options ?
Ventsy Georgiev
3 Dec 08 at 8:39 am
thank you, i used it with with ruby on rails
http://www.ruby-forum.com/topic/81781
but in this way and works great:
“Select one or type the complet path” },
{:onkeypress=>”edit(event);”, :onblur=>”this.editing=false;”})%>
Juan
25 Jul 12 at 7:01 am