TextSuggest selection manipulation methods in Java

Printer QR Code in Java TextSuggest selection manipulation methods

moveSelectionUp: function() { if ( this.selectedIndex > 0 ) { this.updateSelection(this.selectedIndex - 1); } },

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){ Clear previous selection span.style.backgroundColor = ""; } 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.

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(); } },

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.

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.

handleTextInput: function() { var previousRequest = Previous request value this.lastRequestString; this.lastRequestString = Current request value this.textInput.value; if ( this.lastRequestString == "" ) this.hideSuggestions(); else if ( this.lastRequestString != previousRequest ) { Ajax request for data this.sendRequestForSuggestions(); } },

The handleTextInput() method first sets a local variable called previousRequest to the prior value of this.lastRequestString. 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: