AJAX In Action [184]
The GiveOptions() function is declared with the parameter e, which allows us to detect the source of the event. The first thing we need to declare is a local variable intKey. This variable holds the code of the key that the user pressed b. To determine which key was pressed, we must determine what method the user’s browser needs to function. If the window.event property is supported, then we know the browser is IE. We use event.keyCode to obtain the key code value, and we also use event.srcElement to get the object of the user’s textbox. For the other browsers, we use e.which to obtain the key code value and e.target to obtain the textbox object reference.
We then need to check whether the textbox is using a timer to hide the textbox c. To do so, we reference the textbox’s obj property (which we created earlier) and the boolean useTimeout. If the timer is running, we cancel it and then restart it by calling the functions EraseTimeout() and StartTimeout(), which we will code in the section “Using JavaScript timers.”
We then check to see if anything is in the textbox d. If nothing is there, we call a HideTheBox() function (which is developed in the section “Setting the selected value”), set the strLastValue to null, and return false to exit the function. If the textbox contains text, then we can continue. Before we can detect the Enter key and arrow keys, we need to verify that the current active textbox is the same textbox as the last textbox that was active. The first key to detect is the Enter key, which has a key code of 13 e. The Enter key will allow us to grab the value of the selected drop-down item and place it into the visible textbox. Therefore, we call a GrabHighlighted() function (which we will also code in the section “Setting the selected value”). We then remove the focus from the textbox and exit the function.
The next two keys we want to capture are the Up and Down Arrow keys, which have the values 38 and 40, respectively. The arrow keys move the highlighted option up and down the list. In figure 10.4, the dark gray bar is the selected item. By using the Down Arrow key, you can select the next item in the list. This functionality will be discussed in the section “Highlighting the options.” The important thing to note is that the Down Arrow key sends a value of 1 to the function MoveHighlight(), while the Up Arrow key sends -1.
Licensed to jonathan zheng 380 CHAPTER 10 Type-ahead suggest If no special key was pressed, then we check to see if we should hit the server to obtain the values or use the list that we already obtained from the server f. Here again we are using the caching mechanism of this script to limit the postbacks and reduce the load on the server. We can perform a couple of checks to see if we have to get new results. The first check is to determine whether or not the last active textbox is the textbox that currently has the focus. The next check is to make sure that the text the user typed into the textbox is the same as last time with only an addition at the end. If there are no results or our result set has 15 elements or less, then we need to check the server for data. The last check is to make sure that the current value’s length is greater than the last value. If any of these checks pass, then we need to obtain new data from the server. We set the objLastActive with the current textbox. We then set a boolean saying that a request has been sent so we do not perform multiple requests, and we call our function TypeAhead() to grab the values. Then we set the current string in the textbox to the last-known string g. We’ll use that value again to see if we need to request data from the server on the next keystroke. This brings us to accessing the server to obtain the data. 10.3.3 Accessing the server The XMLHttpRequest object allows us to transfer