• Choose a category
• All
• Classic-Fiction

By Root 4139 0

for each suggestion in the suggestions array. Finally, it iterates over the created spans and appends them to the div. This is where the real work starts. Let’s continue by looking at createSuggestionSpans() in listing 10.36 to see what’s involved in creating them. Listing 10.36 Creation of suggestion list items

createSuggestionSpans: function() {

var regExpFlags = "";

if ( this.options.ignoreCase )

regExpFlags = 'i';

var startRegExp = "^";

Licensed to jonathan zheng

418

CHAPTER 10

Type-ahead suggest

if ( this.options.matchAnywhere )

startRegExp = '';

var regExp = new RegExp( startRegExp +

this.lastRequestString,

regExpFlags );

var suggestionSpans = [];

for ( var i = 0 ; i < this.suggestions.length ; i++ )

suggestionSpans.push(

this.createSuggestionSpan( i, regExp ) );

return suggestionSpans;

},

This method first looks at our options object to find the value of the ignoreCase and matchAnywhere properties. This has to be done so that a regular expression can be created with the appropriate parameters that will facilitate the retrieval of the portion of the string in the response that actually matches what the user has typed in. The method then iterates over the suggestions property, which you will recall is an array of objects that have a .text and a .value property. For each suggestion in the array, the createSuggestionSpan() method is called with the index of the suggestion and the regular expression created earlier. All the real work is done in createSuggestionSpan(), shown in listing 10.37.

Listing 10.37 Creation of a list item span

createSuggestionSpan: function( n, regExp ) {

var suggestion = this.suggestions[n];

var suggestionSpan = document.createElement("span"); suggestionSpan.className = this.options.suggestionClassName;

suggestionSpan.style.width = '100%';

suggestionSpan.style.display = 'block';

suggestionSpan.id = this.id + "_" + n;

suggestionSpan.onmouseover =

this.mouseoverHandler.bindAsEventListener(this); suggestionSpan.onclick =

this.itemClickHandler.bindAsEventListener(this); var textValues = this.splitTextValues( suggestion.text,

this.lastRequestString.length, regExp );

var textMatchSpan = document.createElement("span"); textMatchSpan.id = this.id + "_match_" + n; textMatchSpan.className = this.options.matchClassName;

Licensed to jonathan zheng

Refactoring

419

textMatchSpan.onmouseover =

this.mouseoverHandler.bindAsEventListener(this);

textMatchSpan.onclick =

this.itemClickHandler.bindAsEventListener(this);

textMatchSpan.appendChild(

document.createTextNode(textValues.mid) );

suggestionSpan.appendChild(

document.createTextNode(textValues.start) );

suggestionSpan.appendChild(textMatchSpan);

suggestionSpan.appendChild(

document.createTextNode(textValues.end) );

return suggestionSpan;

},

This task is starting to look daunting, but don’t bail out just yet. This method probably looks more complicated than it is, although it does quite a bit of work. Perhaps it would be best to back up at this point and look at this method in terms of what it is attempting to produce: namely, some HTML for a suggestion. Let’s imagine HTML markup for a suggestion that looks something like this:

before matching text, and after This is a gross simplification of what’s actually generated, but it illustrates the structure. Suppose that the user has typed “matching text,” and one of the values in the database is “before matching text, and after.” What’s generated for a suggestion is basically what we just showed but with some extra attributes added to the spans for identification, styling, and event handling. All the hard work of splitting up the before and after portions of the text is done by the following line of code:

var textValues = this.splitTextValues( suggestion.text,

this.lastRequestString.length,

regExp );

The textValues value returned is an object that has three properties: .start,

.mid, and .end. So in the example just shown, textValues is an object that looks like the following:

textValues = {