AJAX In Action [200]
moveSelectionDown: function() {
if ( this.selectedIndex < (this.suggestions.length - 1) ) {
this.updateSelection(this.selectedIndex + 1);
}
},
updateSelection: function(n) {
var span = $(this.id +"_"+this.selectedIndex);
if (span){
span.style.backgroundColor = "";
Clear previous selection
}
this.selectedIndex = n;
var span = $(this.id+"_"+this.selectedIndex);
if (span){
span.style.backgroundColor =
this.options.selectionColor;
}
},
The updateSelection() method does all the real work of actually changing the visual state of the selection. It updates the span created in the selection list—we’ll write that code on day 5—and sets its style.backgroundColor to the value specified as the options.selectionColor of our component’s Configuration object. Before we leave the topic of key-down handling, there’s one more bit of bookkeeping to take care of. Because we handle the arrow keys on the key-down rather than the key-up, we have to change the Up Arrow from its default behavior of moving the caret backward within the text field. We do this with the moveCaretToEnd() method called on a one-millisecond delay via setTimeout. The moveCaretToEnd() method is implemented as shown in listing 10.30. Listing 10.30 TextSuggest moveCaretToEnd() method
moveCaretToEnd: function() {
var pos = this.input.value.length;
if (this.input.setSelectionRange) {
this.input.setSelectionRange(pos,pos);
}
else if(this.input.createTextRange){
var m = this.input.createTextRange();
m.moveStart('character',pos);
m.collapse();
m.select();
}
},
Licensed to jonathan zheng Refactoring 411 Now, let’s move onto the key-up handling. The key-up implementation is a bit simpler than the key-down. All it has to do is broker its event to one of a couple of places based on the value in the input field and the key that was pressed. Let’s take a look at the details in listing 10.31. Listing 10.31 TextSuggest key-up handlers keyupHandler: function(e) { if ( this.input.length == 0 && !this.isOpera ) this.textSuggest.hideSuggestions(); if ( !this.handledSpecialKeys(e) ) this.textSuggest.handleTextInput(); }, handledSpecialKeys: function(e) { var enterKey = 13; var upArrow = 38; var downArrow = 40; if ( e.keyCode == upArrow || e.keyCode == downArrow ) { return true; } else if ( e.keyCode == enterKey ) { this.textSuggest.setInputFromSelection(); return true; } return false; }, The key-up handler first checks to see if the input field contains any text. If not, it tells the TextSuggest component to hide its pop-up list of suggestions. Next it checks to see if the key pressed was one of the special keys: Up Arrow, Down Arrow, or the Enter key. If either the Up or Down Arrow key was pressed, the method just returns without performing any action, since the arrow keys have already been handled during the key-down processing. However, if the Enter key was pressed, the method tells the TextSuggest component to set its input value based on the currently selected item in the suggestion list. Finally, if the input field has a value and the key pressed was not one of the special keys, the key-up handler tells the TextSuggest component to consider that there is some input to be processed via the textSuggest.handleTextInput() method. This is the method of the TextSuggest component that finally calls the Ajax infrastructure we diligently put in place yesterday. The code for handleTextInput() is implemented in listing 10.32. Licensed to jonathan zheng 412 CHAPTER 10 Type-ahead suggest Listing 10.32 Text input handler handleTextInput: function() { var previousRequest = this.lastRequestString; Previous request value this.lastRequestString = this.textInput.value; Current request value if ( this.lastRequestString == "" ) this.hideSuggestions(); else if ( this.lastRequestString != previousRequest ) { this.sendRequestForSuggestions(); Ajax request for data } }, The handleTextInput() method first sets a local variable called previousRequest to the prior value of this.lastRequestString.