• Choose a category
• All
• Classic-Fiction

}

function GrabHighlighted(){

if(currentValueSelected >= 0){

xVal = document.getElementById("OptionsList_" +

currentValueSelected).getAttribute("theArrayNumber"); SetText(xVal);

HideTheBox();

}

}

Licensed to jonathan zheng

390

CHAPTER 10

Type-ahead suggest

function HideTheBox(){

document.getElementById("spanOutput").style.display = "none"; currentValueSelected = -1;

EraseTimeout();

}

The function that allows us to obtain the text and value of the selected item is GrabHighlighted(). First we need to see if the user has selected a value. If a value is selected, then we obtain the index number of the arrOptions array in which the text resides. To do this, we grab the value from the attribute, theArrayNumber, that we set earlier. Then, we call the function SetText() to set the selected option’s text and value into their respective form elements.

SetText() uses the index value passed in as a parameter to index the array arrOptions. The visible text the user sees is set by indexing the first index of the array. The hidden form element receives the second index value stored in our array. After we retrieve the values, we remove the option list from the screen by calling our function HideTheBox().

HideTheBox() allows us to remove the span, spanOutput, from the view. To do this, we reference the span and set its style.display property to none. We remove the selected index by setting the variable currentValueSelected to –1. Any timers that we may have set are removed by calling EraseTimeout(), which we develop next.

Using JavaScript timers

This is the final JavaScript section before the type-ahead project is complete, so your brain may be hurting from all of this client-side code. The JavaScript’s setTimeout() method executes a statement after an elapsed time has passed. The elapsed time is specified in milliseconds, which we added to the object we created back in listing 10.6. The reason for using a timer is to hide the selection span if there is an inactive timeout period. If we set the parameter in our object useTimeout to true, then this function will be called. The timer in listing 10.19 gives us one more feature for a rich user interface.

Listing 10.19 Attaching and removing timing events

function EraseTimeout(){

clearTimeout(isTiming);

isTiming = false;

}

function StartTimeout(){

Licensed to jonathan zheng

The client-side framework

391

isTiming = setTimeout("HideTheBox()",

theTextBox.obj.theVisibleTime);

}

The function StartTimeout() sets the timer when the function is executed. We initialize the timer by setting the variable isTiming to the setTimeout method. The setTimeout method should call the function HideTheBox() after the set time span, indicated by theVisibleTime.

The only other thing we have to do is to remove the timeout. To cancel it, we create the EraseTimeout() function that uses JavaScript’s built-in clearTimeout() function for preventing HideTheBox() from firing. We set our boolean isTiming to false.

Upon finishing that last line of code, we can now run the type-ahead suggest project! Save the project, open it, and start typing in a word. Figure 10.5 shows the progression of the type-ahead suggest. The first letter, s, returned more than 15 options. The second letter, h, reduced the list to five options. The third letter, o, reduced the list to one, which we selected by pressing the Enter key. By adding this project to any form, you can increase the efficiency of your users so they do not have to type in entire words.

Figure 10.5 The progression of the type-ahead project

Licensed to jonathan zheng

392

CHAPTER 10

Type-ahead suggest

10.4 Adding functionality:

multiple elements with different queries

With the way that we designed the script, we can have multiple type-ahead select elements on the page. We just need to add declarations with new calls to SetProperties() for each element. The downside to this method is that in order to have different