-
Book Overview & Buying
-
Table Of Contents
Moodle JavaScript Cookbook
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.
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>...
Change the font size
Change margin width
Change background colour