• Choose a category
• All
• Classic-Fiction

By Root 4081 0

response via the createSuggestions() method into an in-memory representation of the suggestions held in the suggestions property. The suggestions property is an array of objects, each with a text and a value property corresponding to the

and elements of each in the XML response. The remainder of the ajaxUpdate() method’s algorithm is fairly straightforward and should be easy to follow. If no suggestions were found, the pop-up is hidden and the internal value held by the component via a hidden field is cleared. If suggestions were found, the drop-down UI element is created, populated with the suggestions, and displayed, and the selection is updated to be the first one in the list. At this point, the response is considered to be handled, so the this.handlingRequest property discussed earlier is set back to false. Finally, the ajaxUpdate() method checks if there are any pending requests. If so, it sets the pendingRequest flag back to false, takes the current value in the input field for the lastRequestString, and initiates another request cycle via sendRequestForSuggestions(). This concludes the full request/response cycle for the Ajax support and wraps up day 3. We’ve accomplished quite a bit today, plugging in an open source framework that fully “Ajax-enables” our component-meeting requirement, number 7, as well as making sure that it’s done in a way that’s configurable and supports multiple instances on the same page, satisfying requirements 2 and 3. We’ll get into the details of what it means to create, position, show, and hide the UI for the pop-up on day 5. In the meantime, we’ll hook up the component events and take care of the keyboard and mouse handling.

10.5.4 Day 4: handling events

Now that the suggest component is fully Ajax enabled, it’s time to hook it into the events produced by the native input field’s responses to the keyboard. If you are an astute reader, you will have guessed that the code that initiates this process was back in the constructor hiding in a call to the injectSuggestBehavior() method. This is the code that initiates all modifications to the DOM of the existing markup, including the event handling, extra inputs, and the container for the suggestions. It’s all done programmatically so we don’t have to touch any of the HTML code on the page, per requirement number 1. The behavior injection is shown in listing 10.25.

Licensed to jonathan zheng

Refactoring

407

Listing 10.25 The behavior injection

injectSuggestBehavior: function() {

if ( this.isIE ) {

this.textInput.autocomplete = "off";

Remove IE interference

}

var keyEventHandler =

new TextSuggestKeyHandler(this);

Create controller

new Insertion.After( this.textInput,

'' ); new Insertion.After( this.textInput,

'' ); this.createSuggestionsDiv();

Create UI

},

This method first checks to see if the browser is IE and, if so, sets the proprietary autocomplete property value to off. This keeps the autocompletion pop-up from interfering with our own pop-up. Next an object called TextSuggestKeyHandler is created to be the controller object for brokering the events to the right methods. Yes, the event mechanics are enough of a chore on their own that we split this behavior out into a separate object that we will discuss in a moment. The method next inserts a couple of input elements into the markup. You will recall that in the previous round of our script code, we added a hidden input field for storing the value of the component and an invisible text field to prevent the Enter key from causing the form to be submitted. Because our first requirement forbids us from monkeying with the HTML, we programmatically perform these chores with the two Insertion.After() calls. Insertion.After() is brought to us courtesy of the Prototype library. Finally, createSuggestionsDiv() is called to create the containing div element, which holds the