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

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


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

The AutocompleteControl JavaScript Changes

We'll need another variable to hold the drop-shadow <div> because it will be taking over the container's role:

In the init() function, we set the baseContainer to either the drop-shadow or the container element, based on the results of the addDropShadow(HTMLElement) function. Then it's added to the autocompleteControl, instead of the container:

The addDropShadow(HTMLElement) function is responsible for the creation and stacking of the shadow <div> elements. There are two variables declared. The shadows variable acts as a constant which denotes how many layers we'll be working with. This value could be retrieved directly from the CSS file, but that's beyond the scope of this article. The shadow variable is set to an array using the native JavaScript Array() function with the optional integer argument to set the size of the array.

The if statement checks to see that the global dropShadow boolean hasn't been instantiated or is set to false. In that case, the function simply exits without a return value, which will evaluate to false.

The shadowContainer variable is the root <div> element. Setting the id property assures that the id rule which we created earlier will apply to this element.

We need to set the top and left properties to those of the container element since this one will essentially replace it. However, we have to adjust for the number of shadow layers because the root <div> element will be the furthest away from the list. A value of the shadows constant minus one pixel lines it up perfectly.

The "container" className must then be appended to the original container element so that its position is reset.

Now it's time to create the shadow <div> elements. This is done by calling our createElement() utility function with a className but no ID and appending the new element to the shadowContainer. From there, we can use a loop to the same for the remaining layers.

Finally, the list element (the container) is appended to the last shadow layer. The root (the shadowContainer) is returned to be appended to the control by the calling function:

Next up is the booleanValue() function. This function isn't the same as the native String one, since we've overridden it. Here's why: extracting true and false values from their string representations can be difficult because any non-blank strings are evaluated to true by default. This works well in terms of expression evaluation, but less so for user input. Beyond the obvious "true" and "false" strings, we might also want to accept numbers such as "0" and "1," or even case insensitive "yes" and "no." The solution is to override the String class's prototype booleanValue() with our own, where we'll use a switch to determine the result. We can also convert the input string to lower case by applying the toLowerCase() function. Therefore, the strings "1," "true," and "yes" all evaluate to true, and "0," "false," or "no" would evaluate to false. Any other value would be resolved by the native JavaScript Boolean() function:

The code to set the visibility property must be updated because it's now applied to baseContainer rather than the container element. In the clearTable() function:

In the parseMessge() function:

Let's see how the drop shadow looks in the browser. Select the AutocompleteSearchCSS.jsp file in the "Project Explorer" pane and select "Run" => "Run As" => "1 Run on Server" from the main menu to launch the Web application in a browser. Type an 's' in the search textbox to bring up list (See Figure 5)

Limitations of the CSS Solution

The colors I chose were selected to blend with a white background. The color choice must be coordinated with the background of the Web page where the Autocomplete control resides. Moreover, the area surrounding the list should be free of text and images since they don't blend well with the shadow (See Figure 6)

For that reason it may be worth the extra trouble to use images for the shadows because you can control the opacity. CSS does have properties for setting the opacity, but we'll explore that in a future article.

Here's a ZIP file containing the modified AutocompleteCSS project files.

Next week we'll start implementing key handler functionality.


Original: June 9, 2008

Digg This Add to