• Choose a category
• All
• Classic-Fiction

mid: 'matching text',

end: ', and after' };

Finally, the splitTextValues() method implementation is shown here: Licensed to jonathan zheng

420

CHAPTER 10

Type-ahead suggest

splitTextValues: function( text, len, regExp ) {

var startPos = text.search(regExp);

var matchText = text.substring( startPos, startPos + len );

var startText = startPos == 0 ?

"" : text.substring(0, startPos);

var endText = text.substring( startPos + len );

return { start: startText, mid: matchText, end: endText };

},

Now that we’ve covered the basic structure of a suggestion span, let’s talk about the relevant attributes that get generated on the spans. Both the outer span and the inner span are created with CSS class names based on the value of the suggestionClassName and matchClassName properties of the Options object, respectively. Just as the suggestionsDiv has an entirely customizable look and feel via CSS

classes, so does all of the internal HTML structure of each suggestion. The other noteworthy attributes generated within the spans are ID attributes so that the spans can be retrieved later by the aforementioned event handlers. An onmouseover event handler has to be placed on the spans so that the component can update the selection to the suggestion that the mouse is currently over. Also, an onclick event handler must be placed on each suggestion so that when a suggestion line is clicked on, its value can be placed within the text field. The two event handlers are implemented as shown in listing 10.38.

Listing 10.38 List item mouse event handlers

mouseoverHandler: function(e) {

var src = e.srcElement ? e.srcElement : e.target;

var index = parseInt(src.id.substring(src.id.lastIndexOf('_')+1)); this.updateSelection(index);

},

itemClickHandler: function(e) {

this.mouseoverHandler(e);

this.hideSuggestions();

this.textInput.focus();

},

mouseoverHandler() simply finds the target of the event and parses out the ID

that we generated on it to get an index representing which suggestion it is. It can then use the updateSelection() method we wrote on day 4 to update the selection to the suggestion over which the mouse is currently hovering. Similarly, itemClickHandler() has to update the selection, so it just calls mouseoverHandler() to do the selection update work. It then has to do the additional Licensed to jonathan zheng

Refactoring

421

behavior of hiding the suggestions pop-up via a call to the hideSuggestions() method and giving the focus back to the text field so the user can continue typing. We’ve finally completed the pop-up creation task. Now let’s concentrate on the infinitely simpler task of hiding and showing it.

Showing and hiding the pop-up

Now that we’ve developed code to handle all of the complex details of creating a pop-up list of suggestions, we need to write the code that shows and hides it. Fortunately, this is an extremely straightforward process, as any seasoned developer of DHTML like yourself knows. The showing and hiding of an element are typically done by manipulating the display property of an element’s style. This component will be no different. So without further ado, listing 10.39 contains the code that shows the pop up and the code that hides the pop-up.

Listing 10.39 Showing and hiding the suggestions pop-up

showSuggestions: function() {

var divStyle = this.suggestionsDiv.style;

if ( divStyle.display == '' )

return;

this.positionSuggestionsDiv();

Position the pop-up

divStyle.display = '';

Show the pop-up

},

hideSuggestions: function() {

this.suggestionsDiv.style.display =

'none';

Hide the pop-up

},

The show and hide, as shown here, simply manipulate the style.display property of suggestionsDiv in order to show it (via an empty string value) and hide it (via none). The showSuggestions() method does the additional work of positioning the pop-up before showing it. That’s it! We mean that’s really it. Our component is done. Let’s take a few seconds to debrief. 10.5.6 Refactor debriefing

This was certainly a fairly complex