DHTML ComboBox Control Functionality

This page demonstrates how a simple INPUT type=text HTML Element can be made to implement the functionality of a ComboBox Control by assigning a function to its onclick or onfocus event that will manipulate its behavior while in its edit mode. This provides a better alternative when a more flexible user interaction is required for which, the SELECT Element, with its restrictive and limited functionality, may not be able to provide.

The examples on this page emulate a ComboBox Control with the following behaviors which can be configured and modified by providing and setting additional attributes to the INPUT Element :

ComboBox Behaviors

Drops down a listbox of available choices during text edit
Collapses the list of choices to the nearest match(es) of the input value. The typed-in value can be matched on any part or just from the beginning of the field of each available choice.

Matching on any part of the field can be particularly useful when the list of choices has more than one column of information like for example one, which contains an item code and item description. User can either type in the first values of either the code or the description and still find an exact match.
Auto-expands or auto-completes the typed-in value to the most likely choice. This feature can be turned on or off.
Input values can be restricted to the available choices or allowed when not found in list and can be added as a new item to the list if desired.

The underlying script runs fairly well with IE6 and FireFox 2.0. (The author is completely ignorant in scripting for other browsers, has no time yet to learn and in fact has been struggling quite a bit for making it run with FireFox.) You may notice slightly different behaviors between the two and the most notable is when text is made to auto-expand. I noticed an annoying blinking effect on the selected portion everytime a character is typed-in with FireFox. The text selection goes smoothly with IE. It's most probably due to the coding done.

Try the examples here having different settings. You'd note that we don't have a special object being added. Just two DIV Elements, one containing the listbox which inner contents are dynamically created and modified, and another which serves as the listbox background which is useful when you want to make use of some filter and create a semi-transparent effect. And yes of course, we have an IMG Element for the button. This means that it's not different ComboBox Control objects for each example but rather just the same function made to run for each INPUT Element.

ComboBox Examples

1) ComboBox Control with its default settings: Text auto-expand/complete off, value matching done on any part of the field, input not limited to list and text value not found on list is not added, and nearest or matched item on list is not highlighted.

Your country

2) ComboBox Control with the following turned on: Text auto-expand/complete, limit to list and highlight matched item on list. Matching on any part of field is turned off.

This list contains more than 7,000 items.

French verbs

A list as big or even bigger than above will take time to render its HTML contents. Typing the character 'e' above as the first value matches about 7161 items (matching on any part of field turned on) and when the textbox is blank, returns all the choices. The match is done relatively fast but to render everthing might be noticeably slow. To overcome such, there is a portion of the script to limit the items to be rendered. In this example, it's set to render a maximum of 300 choices in the listbox.

3) This one demonstrates how matching on any part of the field is useful. Type either value of each column and a match (if it exists of course) can still be found.

Days of the week

In actual application, you may need additional scripting if only the value of a particular column is needed.

4) ComboBox Control with an initial empty list and the add to list property set to true. Build the list with new values.

Type anything

5) This one just wants to find out what you really are (out of curiosity).

Sex

How to Implement the ComboBox Functionality

Type the following in the HEAD section of the page:

<SCRIPT id=MyComBoxScript language=javascript src="DHTMLCombobox.txt"> </SCRIPT> <LINK rel="Stylesheet" type="text/css" href="DHTMLComboboxCSS.css"> <STYLE id=cbComboCSS></STYLE>
Create an INPUT type=text element on which you want the combobox embedded and in the inline property assignment, designate the onfocus event to this function : cbActivate(event) as in the example below:

<INPUT onfocus=cbActivate(event)>
Add an inline attribute to the INPUT element named cbData to hold the data parameter of the list and assign its value (in string form) to the name of the list source. The cbData parameter can be a single-dimension array (javascript array) containing the list of choices or, it can be a 1 or multi-column ADO recordset, and which should have been previously declared in a script. Since the array or the recordset is converted to string thru the array join() or the ADO GetString() method, the maximum number of choices would largely depend on the logical maximum number of characters a string object in javascript can hold.

To control the behavior of the combobox, the following additional attributes should be added to the element (please mind the case to avoid headaches):

Attribute	Default value
cbAutoExpand	false
cbLimitToList	false
cbMatchOnAnyPart	true
cbHighLightMatch	false
cbAddToList	false

If the above are not provided explicitly, the combobox will behave based on their default values.

Create as many INPUT type=text elements as necessary in your HTML page.

Here' s how your INPUT element should look like with some explicit inline attributes:

<input language=javascript id=frenchverbs class=cbINPUT cbData="frenchverbs" onfocus=cbActivate(event) cbAutoExpand=true cbLimitToList=true cbHighLightMatch=true cbMatchOnAnyPart=false>
View the source of this page to better understand its implementation

Considerations

The location coordinates for the listbox in the script may not work properly when your INPUT Element is contained in several layers of parent elements having different dimensions and scrollable values and having relative positioning properties. You may need to modify the script to set the correct location. The script doesn't also take into account whether the listbox needs to be located below or above the textbox depending on the window area visible.

For other things like the height or the default maximum items in the listbox, font type and sizes, and other user events you may wish to consider and when text values need to update underlying recordsets, etc.,etc., etc., you can make customized changes and add additional global variables or element attributes. A column heading can also be easily added to the listbox.

ComboBox Script and CSS files

DHTMLCombobox.txt (script file)
DHTMLComboboxCSS.css

You can do it with a SELECT Element too!

Yes, you can. Assign this handler to the BODY onload event:

var MyOptions=new Array();//don't forget to include this global array variable to hold the list;

function ConvertSelect(selectid){
var myselect=document.getElementById(selectid);
myselect.insertAdjacentHTML( "beforeBegin",'<INPUT id=MyCombo1  cbAutoExpand=true type=text>');
myselect.style.display="none";
var MyCombo=document.getElementById("MyCombo1");
MyCombo.style.width=myselect.style.width;
MyCombo.onfocus=cbActivate;
MyCombo.value=myselect.options(myselect.selectedIndex).text
var i;for (i=0;i<myselect.options.length;i++){
    MyOptions[i]=myselect.options[i].text;}
MyCombo.setAttribute("cbData","MyOptions");
}

And this one was really a SELECT Element until the document has loaded.

Profession

The script also includes jsfilter() which is a javascript/jscript attempt of the vbscript FILTER function which utilizes regular expression. RegExp is also used to get the choice index and search through the list for a match value instead of iterating through each choice which would be evidently slow for a list containing thousands of entries.