• Choose a category
• All
• Classic-Fiction

xPosElement.style.display = "block";

if(theTextBoxInt.obj.useTimeout){

xPosElement.onmouseout = StartTimeout;

xPosElement.onmouseover = EraseTimeout;

}

else{

xPosElement.onmouseout = null;

xPosElement.onmouseover = null;

}

}

In listing 10.14, we declare our function SetElementPosition(), which accepts one parameter: the textbox object reference. Two local variables, selectedPosX

and selectedPosY, are set to 0. These two integers are used to calculate the position of the element. The textbox reference is set into another local variable. The textbox’s width and height are obtained by referencing the offsetHeight and offsetWidth properties.

A while loop is used to loop through the document tree. The document tree allows us to obtain the X and Y positions of the element relative to its parent. By looping through each positioned parent, we can find the exact position of the element by adding the offset position to the two local variables that we created. Once we obtain the position of the textbox, we can retrieve the span’s object reference, which is used to set the left and top positions of the drop-down suggest element. We then look at the textbox’s obj object that we created to see if its width property is supposed to match the width of the textbox. If the boolean is true, then we set the width of the span. If the boolean is false, the width comes from the value specified in the stylesheet. The last step is to change the visibility of the span so it is not hidden from the user’s view any more. We do this by setting the display property to block.

Now that our span is adequately positioned and visible to the user, we can develop the code that fills in the selectable option’s content.

Licensed to jonathan zheng

The client-side framework

385

Using regular expressions

Since we are going to be searching for string segments, regular expressions are one of the best ways to find matches with added flexibility. The MakeMatches() function that we create next allows us to find the words in the options list that match the user’s text in the textbox. This means we can avoid a trip to the server after every keystroke, since the function narrows the choices for us. The code in listing 10.15 lets us save bandwidth by limiting our result set.

Listing 10.15 Using regular expressions to limit results

var countForId = 0;

function MakeMatches(xCompareStr){

countForId = 0;

var matchArray = new Array();

var regExp = new RegExp(theTextBox.obj.regExAny +

xCompareStr,theTextBox.obj.regExFlags);

for(i=0;ivar theMatch = arrOptions[i][0].match(regExp);

if(theMatch){

matchArray[matchArray.length]=

CreateUnderline(arrOptions[i][0],

xCompareStr,i);

}

}

return matchArray;

}

We create the function MakeMatches(), which accepts one parameter: the string the user entered. We then reset the variable countForId to 0 and create a local array variable matchArray. (Note that countForId is a global variable. That keeps the example simple for now. We’ll do away with it in the refactoring section later!) The key to this function is creating a regular expression that finds the options that match the user’s input. Since we have already determined the parameters for the regular expression when we created the code in listing 10.6, we just need to reference our textbox’s object. We add the property reqExAny, which allows us to match at the beginning of or anywhere in the string. The regExFlags property lets us determine whether to ignore the case when performing the matches. With the regular expression completed, we loop through the array arrOptions to verify that the options in the array match our regular expression. If they match, then we add the text to our array matchArray after we call the function CreateUnderline(). CreateUnderline() formats the code to be displayed. Licensed to jonathan zheng

386

CHAPTER 10

Type-ahead suggest

After we loop through all the elements in our array, we return the matched options to the main function BuildList(), where