Main Page

colors called

Next, the method calls
to get the matching values for the string in the
text box. The last step is to iterate through the matching values and add them to the list box by using the
To use this method, you must set up a text box and list box on a page along with an array of values to
use. The values should be in alphabetical order so that they appear in alphabetical order when sug-
gested to the user. Here’s an example page:
<title>Autosuggest Textbox Example</title>
<script type=”text/javascript” src=”listutil.js”></script>
<script type=”text/javascript” src=”textutil.js”></script>
<script type=”text/javascript”>
var arrColors = [“red”, “orange”, “yellow”, “green”, “blue”, “indigo”,
“violet”, “brown”, “black”, “tan”, “ivory”, “navy”,
“aqua”, “white”, “purple”, “pink”, “gray”, “silver”];
function setText(oListbox, sTextboxId) {
var oTextbox = document.getElementById(sTextboxId);
if (oListbox.selectedIndex > -1) {
oTextbox.value =
<p>Type in a color in lowercase:<br />
<input type=”text” value=”” id=”txtColor”
onkeyup=”TextUtil.autosuggest(this, arrColors, ‘lstColors’)” /><br />
<select id=”lstColors” size=”5” style=”width: 200px”
onclick=”setText(this, ‘txtColor’)”></select>
In this example, an array of colors called
is defined. Because the values aren’t in alphabetical
order, the
method is called after the array is created. It is this array that is referenced by
. The list box with the ID
contains the suggestions for what
the user may want to type. This list box also has an
event handler that simply sets the text box
value to the currently selected option (this is for convenience, although it isn’t a necessary part of the
autosuggest functionality). The
method takes two arguments: the list box and the ID of the
text box. The method then gets a reference to the text box and sets its value to the currently selected
value in the list box.
Chapter 11
14_579088 ch11.qxd 3/28/05 11:40 AM Page 364

JavaScript EditorFree JavaScript Editor     Ajax Editor