JavaScript ComboBox

This page describes a simple JavaScript ComboBox which works with IE (version 7.x) and Firefox (version 2.x). It is useful because the standard HTML select box doesn't allow the options to be edited.

Using the ComboBox

A <select> box with an overlapping <input type=text> box are used to simulate a ComboBox. The ComboBox saves and restores its state using cookies. Obtain and save the JavaScript ComboBox source code by clicking the following link comboBox.js. Include and use the ComboBox as follows:

<head>
  <script type="text/javascript" src="comboBox.js"></script>
<head>

<body>
  ...
  <script language="JavaScript">
    ComboBox.Factory(0, "combo1");
  </script>
  <button onclick="javascript:combo1.clear();">c</button>
  <button onclick="javascript:combo1.update();">update</button>
  ...
</body>

ComboBox.Factory(style, id, maxoptions, width) has 4 parameters, the last 2 being optional. Style is an integer (0 or 1), id a string,  maxoptions an integer and width an integer. The default value of maxoptions is 4. The default value of width is ignored if style is 0 and set to 100 if style is 1. The id parameter is used to identify the ComboBox so that the two 'exported' functions clear() and update() can be called (see  above).

Note that instead of using ComboBox.Factoy(...), the following, more direct, alternative may be used:

  <script language="JavaScript">
    var combo1 = ComboBox.Factory(0, "combo1");
  </script>

ComboBox Style 0 Examples (click  to select item)

ComboBox(0, "combo1", 5, 200):



ComboBox(0, "combo2") in a table:

ComboBox Style 1 Examples
ComboBox(1, "combo3", 4):



ComboBox(1, "combo4", 4, 200)  in a table:


Conclusion

Feel free to use this JavaScript ComboBox as you see fit. Please let me know if you make use of this code, especially if you  make improvements or fix bugs.

mailto:jones@scss.tcd.ie last updated: 24 September 2007