The JavaScript code that detects the user s keypresses in Java

Creation Denso QR Bar Code in Java The JavaScript code that detects the user s keypresses

function GiveOptions(e){ var intKey = -1; if(window.event){ intKey = event.keyCode; theTextBox = event.srcElement; } else{ intKey = e.which; theTextBox = e.target; }

if(theTextBox.obj.useTimeout){ if(isTiming)EraseTimeout(); StartTimeout(); } if(theTextBox.value.length == 0 && !isOpera){ arrOptions = new Array(); HideTheBox(); strLastValue = ""; return false; } if(objLastActive == theTextBox){ if(intKey == 13){ GrabHighlighted(); theTextBox.blur(); return false; } else if(intKey == 38){ MoveHighlight(-1); return false; } else if(intKey == 40){ MoveHighlight(1); return false; } } if(objLastActive != theTextBox || theTextBox.value .indexOf(strLastValue) != 0 || ((arrOptions.length==0 || arrOptions.length==15 ) && !bNoResults) || (theTextBox.value.length <= strLastValue.length)){ objLastActive = theTextBox; bMadeRequest = true TypeAhead(theTextBox.value) } else if(!bMadeRequest){ BuildList(theTextBox.value); } strLastValue = theTextBox.value; }

If the user is typing a word, either this function will start a new search, checking the server for matching data, or it will work with the cached result set. If we do not need to get new data from the server, then we can call a BuildList() function, which will limit the result set. We explain more about that in the section Building the results span, later in this chapter. 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.