1. Technology

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blcombo.htm

was emailed to:

Thanks for sharing About.com with others!

Modern Combo Boxes

1. Introduction and Sample

More of this Feature

Create Combo Box JavaScript

One form element that is missing from HTML is the combo box. HTML provides input fields where you can type your own value, selection lists where you can select a value from a list but a combo box which combines both of those into the one field cannot be created with HTML alone. By using a combination of HTML, CSS, and JavaScript we can remedy this lack and convert an input field into a proper combo box for those of our visitors with JavaScript available.

Our JavaScript generated combo-box will be fully accessible in that it is a simple input field when JavaScript is not available. When JavaScript is available moving to the field either by tabbing to it or by clicking on it will open the drop down list. Entries from the list can be selected either by clicking on the desired value with the mouse or by navigating to the desired value using the keyboard. Either enter or the down arrow key will cycle forward through the options and loop around once the bottom is reached (depending on which browser you are using). (The down arrow key does not get passed to the web page by Opera and so that key cannot be used with that browser but that browser will still allow the enter key perform that function). The up arrow key will move back up the list but will not cycle to the bottom when the top of the list is reached.

Here is an example combo box for a state field. The Australian states and territories can be selected from the drop down list while states from any country in the world can be typed straight into the field. Tabbing out of the field or clicking outside of the combo box will close the drop down list (except if you tab out of the field while the mouse is still over the list in which case the list will disappear when you move the mouse off of it).

  • ACT
  • NSW
  • NT
  • QLD
  • SA
  • TAS
  • VIC
  • WA

Note that you can have multiple combo boxes on the same page using this script, you just need to apply a different id to the input field within each.

With some browsers the auto-complete popup will appear in front of the drop down list if the person has selected a value for the field before. As the selected value from the drop down also appears in the input field the selection should still be usable from the keyboard if the browser does that. Because of the way the JavaScript for the drop down works it will not be possible to select an entry from the auto complete popup using the keyboard as any value selected from there will be immediately replaced by the value selected from the drop down list. It should still be possible to select from the auto complete using the mouse.

So if you want to add real combo boxes into your forms then the place to start is with the HTML.

I wish to thank my friend Jimmy P for helping me work out the required combination of event handlers needed to make this script work.

See More About

©2014 About.com. All rights reserved.