• Choose a category
• All
• Classic-Fiction

By Root 3976 0

It then sets the lastRequestString property to the current value of the input field so that it can compare the two to make sure that it’s not trying to send a request for the same information that has already been requested. If the request is an empty string, the pop-up list is hidden. If the request is a valid request for new information, the handleTextInput() method calls the sendRequestForSuggestions() method that we wrote yesterday to call the Ajax-based data source to get some suggestions from the server. If the request is the same as the last one, the request is ignored and no action is taken. Finally, the pieces are starting to come together. The construction, the configuration, the Ajax handling, the event handling—it’s almost as if we know what we’re doing. And just in the nick of time; it’s already day 4!

We have one more method of our controller class to cover—the onblur handler. The onblur handler is a very simple method that sets the value of the text field from the current selection and hides the suggestion. The implementation is as follows:

onblurHandler: function(e) {

if ( this.textSuggest.suggestionsDiv.style.display == '' )

this.textSuggest.setInputFromSelection();

this.textSuggest.hideSuggestions();

}

The onblurHandler and handledSpecialKeys both reference a method of the TextSuggest component that we’ve not seen yet—setInputFromSelection(). This method does essentially the same thing that our SetText() function did earlier—

namely, to take the currently selected suggestion; set both the input field and the hidden field with its text and value, respectively; and hide the list of suggestions. The implementation is shown here:

Licensed to jonathan zheng

Refactoring

413

setInputFromSelection: function() {

var hiddenInput = $( this.id + "_hidden" );

var suggestion = this.suggestions[ this.selectedIndex ];

this.textInput.value = suggestion.text;

Update visible value

hiddenInput.value = suggestion.value;

Update hidden value

this.hideSuggestions();

}

We may have put in a little overtime to accomplish all that’s been done today. We created a controller class to handle all of our event management. We used the Prototype library’s bindAsEventListener() method to automatically create closures for us and normalize the IE and W3C event models. We implemented our key-up/down handlers to encapsulate the complexities of processing the selection as well as normal text input. We ensured that we initiate only requests for new information. We managed the showing and hiding of the suggestions UI as appropriate. We updated the DOM programmatically to manage the hidden input value and the invisible text field that prevents form submission when the Enter key is pressed. And we handled the updating of the hidden and visible values of the TextSuggest component. On day 5, we wrap a bow around our refactored component by implementing all the methods required to create the pop-up, position it, show it, hide it, and manage its mouse events. The once dim light at the end of the tunnel is now clearly in view.

10.5.5 Day 5: the suggestions pop-up UI

Now that we’re fully plugged in, so to speak, it’s time to tie up all the loose ends. To this point, we’ve created infrastructure for configurability and defaults, Ajax request and response handling, and the events that tie everything together. All that’s left to cover is the graphical part. What we’re referring to here, obviously, is the pop-up list of suggestions and all that implies. The tasks left to handle with respect to the UI are as follows:

■

Creation of the suggestion pop-up UI. This entails the creation of the div for the suggestions as well as the span for each suggestion.

■

The positioning of the pop-up.

■

The population of the pop-up with suggestions.

■

The showing and hiding of the suggestions.

Licensed to jonathan zheng

414

CHAPTER 10

Type-ahead suggest

Creating the suggestion pop-up

Let’s go back and examine the implementation of the injectSuggestBehavior() method. Recall that this code was more