How to Create an Ajax Autocomplete Text Field: Part 5/Page 3 | WebReference

How to Create an Ajax Autocomplete Text Field: Part 5/Page 3


How to Create an Ajax Autocomplete Text Field: Part 5 [con't]

The appendFund() Function

The appendFund() function adds each list item to the list. We already have a reference to the table in the completeTable variable so we just need to add a row to it. The row will contain two cells: one for the fund symbol and one for the fund name. DOM-compliant browsers use the createElement() and appendChild() functions. Internet Explorer has specialized insertRow() and insertCell() functions that perform both the create and append tasks:

The next block of code affects the appearance of the row. Our goal is to emulate a link because clicking the row is what causes the fund details to be displayed in the Fund Details.html page. There are two components to the effect: first, we set the className for the row to the one that we defined in the CSS file. The popupRow class sets the mousepointer icon to a pointer, so that it changes to a hand whenever it's positioned over a row. Second, the following five events trigger JavaScript function calls to further emulate a link:

similar to a link's hover property. It occurs when the mousepointer is positioned over the row
occurs when the mousepointer leaves the row
fires when a mouse button is pressed
fires when any mouse button is released
executes when the left mouse button is pressed and released. While all the other mouse behaviors are assigned a function to facilitate sharing, the onclick has its own anonymous function because it's the only event that causes a specific action to occur. Instead of altering the appearance of the row, the onclick function calls the servlet. Notice that its action parameter is "lookup" instead of "complete" and the searchString is replaced by the symbol. This will cause the servlet to find the specific fund by symbol rather than attempt to find several partial matches:

The remaining code adds the fund fields to the table cells. To do this, we use the DOM createTextNode() function. It adds the text that appears between the tags: <td>some text</td>. All the text nodes are part of the popupItem class, which is defined in the CSS file. To demonstrate how each field can have its own attributes, I gave the symbol text a bold font. It would also be feasible to give it its own class:

The Row Event Functions

All the row event functions need a reference to the row's <tr> node in order to affect its properties. Sounds easy, but the element that triggered the event isn't the one we want: it's the cell! Actually, there's a property to get to the row element from the cell, but we have to retrieve the Event object in order to do so. Due to differing browser implementations, there are two ways to get it. In Internet Explorer, the event is a property of the window Object. The event, in turn has a property called srcElement, which is the element that caused the event to fire. In Mozilla-style browsers, the event is passed to the assigned function as an argument. It stores the firing element in a property called target. Here's how we handle both browser styles: first, we add the event argument to the function signature to capture it. I called it e, but it can be any legal JavaScript name. The next step is to create a local variable to hold the firing element. Now we can test the e argument. Since an "undefined" value always evaluates to false, we can use a ternary (expression : true : false) operator to set the cell variable. From there, we use its parent property to access the row.

Here, we're making the row background color blue and setting the font color to a very light gray:

The rowOff() function sets the row background and text colors back to their original values of white and black, respectively:

The rowDown() function sets the row background to red, just like the default link behavior. The text remains light gray since it was set in the rowOn() function:

The clearTable() Function

Our last function to look at is clearTable(). Its job is to not only remove the child nodes from the table, but to make it appear to vanish without a trace. Without the line to set the visibility to hidden, a small black spec can remain in some browsers. The loop removes the nodes in reverse order, always a good idea because the length will decrease as you remove the nodes, making it an unstable condition for exiting the loop:

Here's the completed AutocompleteList.js. Next week, we'll finally get to see how all the components work together when we build the AutocompleteSearch.jsp file and the rest of the Web pages!


About the Author

Robert Gravelle is a Senior Programmer/Analyst for the Canadian Border Services Agency as well as a freelance IT consultant. Rob specializes in Java, Perl, ASP, Microsoft application automation, JavaScript, VBScript, Web Development and multi-tier systems. Feel free to contact Rob at should you like more information, but note that, although Rob will do his very best to respond in a timely manner, due to the volume of emails received, he cannot guarantee a response to every message.

Original: April 28, 2008

Digg This Add to