• Choose a category
• All
• Classic-Fiction

By Root 3991 0

the GiveOptions() function is performing the same role as the data caching that we discussed in section 10.1.1. By using client-side code to handle the additional keystrokes, we are decreasing the bandwidth consumption of the type-ahead suggest. To implement our cache of options, let’s set some global variables on the client. The code in listing 10.9 contains a list of global variables that we need to start with.

Listing 10.9 Global variables used throughout the project

var arrOptions = new Array();

var strLastValue = "";

var bMadeRequest;

var theTextBox;

var objLastActive;

Licensed to jonathan zheng

The client-side framework

377

var currentValueSelected = -1;

var bNoResults = false;

var isTiming = false;

The first global variable is arrOptions. This variable references an array that holds all the available options from the server query. The next variable is strLastValue, which holds the last string that was contained in the textbox. The variable bMadeRequest is a boolean flag that lets us know that a request has already been sent to the server so we do not keep sending additional requests. The flag is meant for very fast typists, so we do not have to worry about using timeouts as Google does.

The variable theTextBox will hold a reference to the textbox that the user has in focus, whereas objLastActive will hold the reference to the last active textbox. This is used to determine whether the data set needs to be refreshed if the user switches textboxes. While there is only one visible textbox on our example, if this solution is implemented on a window with multiple textboxes, we need to know which one has the focus. The next variable, currentValueSelected, will act like the selectedIndex of a select list. If the value is -1, nothing is selected. The final global variable that we need right now is a boolean bNoResults. This will tell us that there are no results, so we should not bother trying to find any. The variable isTiming allows us to determine whether a timer is running on the page. The timer runs to hide the options from the user’s view if there is a period of inactivity. Even though you might not completely understand what these global variables’ roles are at this time, you’ll understand better when we start using them. With all our global variables referenced, we can build the GiveOptions() function, which is called from the keystrokes in the textbox. The GiveOptions() function in listing 10.10 lets us determine the action the user has performed in the textbox. Listing 10.10 The JavaScript code that detects the user’s keypresses function GiveOptions(e){

var intKey = -1;

if(window.event){

intKey = event.keyCode;

theTextBox = event.srcElement;

b Detect the

}

keypress

else{

intKey = e.which;

theTextBox = e.target;

}

Licensed to jonathan zheng

378

CHAPTER 10

Type-ahead suggest

if(theTextBox.obj.useTimeout){

c Reset the

if(isTiming)EraseTimeout();

timer

StartTimeout();

}

if(theTextBox.value.length == 0

&& !isOpera){

arrOptions = new Array();

d Determine if

HideTheBox(); text exists

strLastValue = "";

return false;

}

if(objLastActive == theTextBox){

if(intKey == 13){

GrabHighlighted();

theTextBox.blur();

return false;

}

else if(intKey == 38){

e Determine

MoveHighlight(-1);

function

return false;

keys

}

else if(intKey == 40){

MoveHighlight(1);

return false;

}

}

if(objLastActive != theTextBox ||

theTextBox.value

.indexOf(strLastValue) != 0 ||

((arrOptions.length==0 ||

arrOptions.length==15 )

&& !bNoResults) ||

(theTextBox.value.length

<= strLastValue.length)){

f Handle

keypress

action

objLastActive = theTextBox;

bMadeRequest = true

TypeAhead(theTextBox.value)

}

else if(!bMadeRequest){

BuildList(theTextBox.value);

}

strLastValue = theTextBox.value; g Save user input

}

Licensed to jonathan zheng

The client-side framework

379

If the user is typing a word, either this function will start a new search, checking the server for matching data, or it will work with the cached result set.