Adding a combo box with auto-complete

In this example, we will use auto-complete in conjunction with a combo box (drop-down list). This differs from the previous example in one significant way — it includes a drop-down arrow button that allows the user to see the complete list of values without typing first.

This is useful in situations where the user may be unsure of a suitable value. In this case, they can click the drop-down button to see suggestions without having to start guessing as they type. Additionally, this method also supports the same match-as-you-type style auto-complete as that of the previous recipe.

How to do it...

Open the autocomplete.php file from the previous recipe for editing, and add the following HTML below the text box based auto-complete control:

<div style="width:15em;height:10em;">
<input id="txtCombo" type="text" style="vertical-align:top;position:static;width:11em;"><span id="toggle"></span>
<div id="txtCombo_container"></div&gt...