• Choose a category
• All
• Classic-Fiction

By Root 4165 0

the matches are displayed to the user. MakeMatches() provides the caching mechanism that we talked about earlier. Instead of returning to the server to limit the search for every keystroke, regular expressions allow us to limit the available options to the user. The CreateUnderline() function is the last step in formatting the results. Manipulating strings

The final step for formatting the strings so that the user can view and interact with them is to manipulate the string so that it is contained within a span tag, has an underline under the matching text, and has the onclick event handler attached to it so we can select it with the mouse. This section uses regular expressions again to build the formatted string, as you can see in listing 10.16. Listing 10.16 Performing string manipulation with JavaScript

var undeStart = "";

var undeEnd = "";

var selectSpanStart = "class='spanNormalElement' onmouseover='SetHighColor(this)' "; var selectSpanEnd ="";

function CreateUnderline(xStr,xTextMatch,xVal){

selectSpanMid = "onclick='SetText(" + xVal + ")'" +

"id='OptionsList_" +

countForId + "' theArrayNumber='"+ xVal +"'>"; var regExp = new RegExp(theTextBox.obj.regExAny +

xTextMatch,theTextBox.obj.regExFlags);

var aStart = xStr.search(regExp);

var matchedText = xStr.substring(aStart,

aStart + xTextMatch.length);

countForId++;

return selectSpanStart + selectSpanMid +

xStr.replace(regExp,undeStart +

matchedText + undeEnd) + selectSpanEnd;

}

In listing 10.16, we define two variables to hold strings that are used to insert a CSS class around the portion of text that matches the string. This allows us to style the text easily. The first variable, undeStart, holds our start span tag, while the second variable, undeEnd, holds the closing span tag.

Licensed to jonathan zheng

The client-side framework

387

The next two variables form the container for the entire string. This container lets us manipulate the background color and determine whether the cell is clicked on. You can see that in the variable selectSpanStart, we added a mouseover to highlight the cell. The selectSpanEnd variable is just the closing tag for the span.

Our function CreateUnderline() is called by the MakeMatches() function that we just coded. MakeMatches() passes in three parameters: the string the user entered, the option’s text, and the option’s value. With the passed-in data, we can develop the onclick handler and add an ID for the span. The onclick handler allows us to select the option, and the ID allows us to use DOM to select the option from the list.

We use a regular expression again to match the text typed by the user. This is so that we can insert the underline spans we created in the string. The search method is used to determine where the match is located in the string. After we find the location of the string, we can obtain the substring so that we can keep the original formatting. Our counter countForId is incremented, and we return our formatted string by joining together all the span elements that we created. The returned text is now formatted, but we still need to finish the CSS classes we added to the span elements.

The span elements were assigned CSS class names, so we do not have to manually go into the JavaScript code to change certain properties of the text. This allows us to fit the autocomplete textbox into any color scheme by simply changing these few CSS rules: span.spanMatchText{ text-decoration: underline;

font-weight: bold; }

span.spanNormalElement{ background: #C0C0C0; }

span.spanHighElement{ background: #000040;

color: white;

cursor: pointer; }

span.noMatchData{ font-weight: bold;

color: #0000FF; }

Remember that in figure 10.4 the matching text was bold and underlined. You can see those two properties listed in the CSS rule span.spanMatchText. The span default style is represented with span.spanNormalElement, which contains a gray background color. The selected item is applied the CSS rule span.spanHighElement.