How to Create an Ajax Autocomplete Text Field - Part 9 / Page 2 | WebReference

How to Create an Ajax Autocomplete Text Field - Part 9 / Page 2

[previous] [next]

How to Create an Ajax Autocomplete Text Field - Part 9 [con't]

Mouse Event Handling

The rowOn(), rowOff() and rowDown() functions all need access to the row to affect its appearance. As it stands, each of these functions contain the following code to select the row element:

With the addition of the new <span> element, this code no longer works since the firing element may not be the cell. We need to solidify this code with a surefire way to get the row element. The solution can be found in the way that the row's mouse handler functions are assigned. The mouse events already belong to the row, so any time an event handler function is called, it's executed within that row's scope. In other words, the this object is the row!

Another weakness in the current row event handler functions is that they're setting appearance-related properties in JavaScript code. In keeping with the standard that keeping formatting instructions in the CSS file, we'll create some class rules for each row state. There are four mouse events (over, up, down, and out), but we only need to create three rules, as the mouseover and mouseup states are currently the same:

Now that we've got classes for each of the row's states, we can change it by setting the className. To simplify things even further, I amalgamated all the row handlers into one function called handleMouseEvent(e). In Mozilla-style browsers, the event is passed to the function as the first argument, so we'll include a parameter called e. In the case of Internet Explorer, which doesn't pass the event to the function, but keeps it in the window.event property, we can assign it to our e variable. The neat thing about this new function is the event name is the same as the class. Hence, an event of type "mouseover" will add the mouseover class to the default of popupRow. Here's the final result:

Don't forget to update the assignments of our function to the row events, in the appendFund() function:

The Moment of Truth!

Let's have a look at our changes in a browser. Right-click on the AutocompleteSearchCSS.jsp file in the "Project Explorer" pane and select "Run As => 1 Run on Server" from the popup menu (See Figure 1)

Type an 's' in the textbox to display the search string highlighting. The search string should be enclosed within a yellow box and the text should be blue. Hover the mouse over the rows to make sure that the colors change. Finally, click and release the left mouse button to test the mousedown and up events. Here's a screenshot of the mouseover event (See Figure 2)

Adding a CSS Drop Shadow

A drop shadow is a great way to enhance the effect of the list floating over the page contents. Many sites use a combination of CSS positioning, Internet Explorer's AlphaImageLoader filter, and images to create the drop shadow, but this week, we're going explore an alternative method using only CSS styles. The illusion relies on several separate color boxes that, when put together, create a gradation effect that will please all but the most discerning of critics. The more boxes are used, the smoother the gradation, but as with animation effects, there's a point of diminishing returns. Rather than utilize the standard three <div> boxes, we'll use six!

The dropShadow JSP Parameter

As with any optional property, let's give the user the choice of having a dropShadow or not. Since there are only two options to choose from, this parameter will have to be treated as a boolean in the JavaScript code. We'll have to include a little extra code to handle the conversion from a string to a boolean primitive. Add the dropShadow parameter to the AutoCompleteSearchCSS.jsp page:

The JavaScript dropShadow variable, in the AutocompleteControl.jsp file will create a String literal, set to the parameter's value:

The "shadow-container" CSS Rules

Aside from using a number of smooth color transitions, creating a convincing drop shadow effect depends largely on the positioning of the layers. The following image demonstrates how stacking several boxes in increasingly darker shades with top and left properties of -1 pixel creates a shadow-like effect (See Figure 3)

The colors and positioning of the layers are defined in the AutocompleteControl.css file. The shadow-container ID rule is applied to the <div> that replaces the list container element. As such, it shares some of the same properties, such as the "absolute" positioning and "hidden" visibility. All of its children's properties, with the exclusion of the background color, are defined in a class rule. The shared properties include the relative positioning of the top and left properties of -1 pixel, and the a visibility of "inherited," so setting the shadow-container's visibility will affect all the child elements. The "!important" keyword is included mainly for the benefit of the list container, so that this rule overrides the left and top positions that we assigned in code:

Since we applied the style directly to the element, it acts like an inline style, which normally supersedes the class style. Here's what the list looks like without the !important keyword (See Figure 4)

Here's the CSS code associated with the drop shadow effect:

[previous] [next]