How to Create an Ajax Autocomplete Text Field: Part 11 [con't]
|
The ENTER Key
Anyone who's ever dabbled in key event handling knows that the ENTER key is the toughest one to implement. For one thing, it's important to cancel it because its default action is to submit the page's contents to the server, much like a form submit button. Unless you take steps to prevent the default behavior, the page will be gone before you can do much of anything! It also just happens to involve the most processing of all our key handlers.
Add the following code to the handleEnterAndTabKeys() function. Remember that we can't put it in handleSpecialKeys() because the keyup event fires after the key's default action has executed:
While we were capturing events in the last function, this time, our goal is to fire one. If you recall, the <tr> row node's click event calls an anonymous function to look up a fund's information based on its symbol. You can find it in the appendFund() function:
Let's update the click event handler by using our new addEventHandler() function, just to be sure that we don't overwrite another handler:
Getting back to the ENTER key handler, depending on which method the node supports, either the fireEvent() or the dispatchEvent() function is called. Calling fireEvent() is easy. All you need to do is pass it the event name, preceded by the 'on' prefix - onclick in this case. Browsers that support the DOM Level 2 event propagation model require a bit more setting up. The first thing is stop the default behavior from occurring, which, in this instance, would be to submit the form's contents to the server. The net result of that action is that the completeField's contents are used to perform a fund search, so instead of getting one fund back, you get details for the entire list. To stop a key's default behavior from occurring, we call the preventDefault() method on the event. The next step is to create an event of type 'MouseEvents' using document.createEvent( String eventType ). For the full list of event types, see the references at the end of the article. We need to call initMouseEvent() to initialize the event we just created. It takes quite a few parameters:
Here's an explanation of each parameter:
- eventType: The string to set the Event's type. Possible types for mouse events include:
click,mousedown,mouseup,mouseover,mousemoveandmouseout. - canBubble: Whether or not the Event can bubble. Sets the value of
event.bubbles. - cancelable: Whether or not the Event's default action can be prevented. Sets the value of
event.cancelable. - view: The Event's
AbstractView. You should pass the window object here. Sets the value ofevent.view. - detail: The Event's mouse click count. Sets the value of
event.detail. - screenX: The Event's screen
xcoordinate. Sets the value ofevent.screenX. - screenY: The Event's screen
ycoordinate. Sets the value ofevent.screenY. - clientX: The Event's client
xcoordinate. Sets the value ofevent.clientX. - clientY: The Event's client
ycoordinate. Sets the value ofevent.clientY. - ctrlKey: Whether or not the control key was depressed during the Event. Sets the value of
event.ctrlKey. - altKey: Whether or not the alt key was depressed during the Event. Sets the value of
event.altKey. - shiftKey: Whether or not the shift key was depressed during the Event. Sets the value of
event.shiftKey. - metaKey: Whether or not the meta key was depressed during the Event. Sets the value of
event.metaKey. - button: The Event's mouse
event.button. - relatedTarget: The Event's related
EventTarget. Only used with some event types (e.g.mouseoverandmouseout). In other cases, pass null.
That's it for key event capturing. Before we call it a day, let's tie up a couple of loose ends.
