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:
onmouseover
- similar to a link's hover property. It occurs when the mousepointer is positioned over the row
onmouseout
- occurs when the mousepointer leaves the row
onmousedown
- fires when a mouse button is pressed
onmouseup
- fires when any mouse button is released
onclick
- 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, theonclick
function calls the servlet. Notice that itsaction
parameter is "lookup" instead of "complete" and thesearchString
is replaced by thesymbol
. 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
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!
References
- The Document Object Model
- How to make a table row clickable
- A JSON Parser at Developer.Yahoo.com
- My AJAX URPMs article
- My Introduction to JSON article
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 [email protected] 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