How to Create an Ajax Autocomplete Text Field: Part 10 [con't]
Now we'll include a method for updating the counter, firstRow and lastRow variables when a row is added to the table. The exclamation point (!) before the counter variable is used to check if it's at zero because (Not) zero is evaluated to true. The incrementor (++) operator is evaluated after the !counter, so it has no effect on the if statement. While the firstRow is only set when the counter is at zero, the lastRow is set to the new row every time:
Once again, add the new method to the return object, making sure to include a comma between the two JSON object properties:
We'll add the call to addRow() in the appendFund() function, after all the row's event handlers have been set:
UP and DOWN Arrow Keys
completeField textbox will scroll through the list items like an HTML <select> field. The highlightClass will be turned on for that row so it appears to have the focus, even though the completeField never loses the focus. Add the following function calls to the handleSpecialKeys() function for the UP and DOWN arrow keys:
Back in the RowManager class, we'll add the highlightPreviousRow() method under the other ones:
The highlightPreviousRow() method requires both the non-highlighted and highlighted style classes because any currently highlighted row must be turned off before highlighting another one. The currently highlighted row is stored in the private highlightedRow variable. It's compared to the firstRow using the JavaScript 1.3 strict equality !== (not equals) operator. Using the new operators, objects are deemed to be equal only when they refer to the exact same object. We want to verify that the highlighted row isn't the first one in the list, because we want to turn off the highlighting on that row and apply it to the row that resides directly above the current one. Assuming that the highlighted row isn't the first one in the list, we call the generic highlightRow() method, passing a third parameter which is the reference to the row to be highlighted.
The getPreviousRow() method uses the DOM previousSibling property to obtain a reference to the previous row. There's some logic built-in to the method so it will return the last row if no highlightedRow or previousSibling are found:
The highlightRow() method is called by both the highlightPreviousRow() and highlightNextRow() methods to apply the changes to the currently highlightedRow and new row. The setHighlightRow() setter is called to update the highlightedRow variable:
Here's the code for the setHighlightedRow() method. It's a simple setter method for the highlightedRow variable:
The highlightNextRow() method is almost exactly the same as highlightPreviousRow() except that the highlightedRow is now compared to the lastRow and the result of getNextRow() is sent to the generic highlightRow() method:
Ditto for the getNextRow() method. It closely resembles getPreviousRow(), except that it uses the DOM nextSibling property and returns the firstRow by default:
Find a programming school near you