388

CHAPTER 10

Type-ahead suggest

have built the stylesheet rules, we have finished working with outputting the results. All that is left is handling the Enter and arrow keys and creating our timer (which hides the options in case of inactivity).

Highlighting the options

Earlier in the chapter, we captured the keypresses of the Up and Down Arrow keys so that the user could move the selectedIndex up or down without having to use her mouse. The arrow keys send us either 1 (to move down the selection) or –1 (to move up the selection). When we move a selection, we apply CSS classes to the span elements. We are also adjusting the global variable currentValueSelected so that it holds our current index. The MoveHighlight() function in listing 10.17 gives us a richer user interface since it interacts with both the mouse and the keyboard.

Listing 10.17 Changing the CSS class names of elements with JavaScript function MoveHighlight(xDir){

if(currentValueSelected >= 0){

newValue = parseInt(currentValueSelected) + parseInt(xDir);

if(newValue > -1 && newValue < countForId){

currentValueSelected = newValue;

SetHighColor (null);

}

}

}

function SetHighColor(theTextBox){

if(theTextBox){

currentValueSelected =

theTextBox.id.slice(theTextBox.id.indexOf("_")+1,

theTextBox.id.length);

}

for(i = 0; i < countForId; i++){

document.getElementById('OptionsList_' + i).className =

'spanNormalElement';

}

document.getElementById('OptionsList_' +

currentValueSelected).className = 'spanHighElement';

}

The MoveHighlight() function enables the user to use the Up and Down Arrow keys to make a selection. The function accepts one parameter, xDir, symbolizing the direction in which the highlight should be moved. The first check verifies that we have options to select. If there are options, we can obtain the new value. We Licensed to jonathan zheng

The client-side framework

389

verify that the new value is within the range of the selection. If it is, we set currentValueSelected and proceed to the next function, SetHighColor(), to highlight the new selection.

SetHighColor() is called from two different events: the arrow keys and the onmouseover event handler. This function is called to remove the highlight from the last selected option and add it to the new option that has been chosen. The onmouseover event in listing 10.16 passes in the object of the span; therefore, we need to obtain the index number of the span by ripping apart the ID. The arrow keys pass this value, so we are not required to perform this action since the moveHighlight() function already set currentValueSelected. We loop through all of the span tags and set their CSS class to spanNormalElement. This resets their appearance to their nonselected state. After the looping is completed, we add the CSS class to the selected option. With the two functions that we just created, we have given the user the ability to select an option with either the mouse or the keyboard. All that is left is to take this selected value and add it to the textbox.

Setting the selected value

The purpose of the type-ahead suggest is to allow the users to select available options to limit the amount of effort required to fill in a form field. In order to do this, we need to take the index of the item that the user selected and set the text to the textbox and the value to the hidden text field. These three functions in listing 10.18 allow our span element to act like an HTML select element. Listing 10.18 Handling the arrow keys and mouse click events

function SetText(xVal){

theTextBox.value = arrOptions[xVal][0]; //set text value

theTextBox.obj.hidden.value = arrOptions[xVal][1];

document.getElementById("spanOutput").style.display