How to Create an Ajax Autocomplete Text Field - Part 9 [con't]
We'll need another variable to hold the
it will be taking over the
init() function, we set the
baseContainer to either the
container element, based on the results of the
function. Then it's added to the
autocompleteControl, instead of the
addDropShadow(HTMLElement) function is responsible for the creation and
stacking of the shadow
<div> elements. There are two variables declared.
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
Array() function with the optional
integer argument to set the size of the array.
ifstatement checks to see that the global
dropShadowboolean hasn't been instantiated or is set to
false. In that case, the function simply exits without a return value, which will evaluate to
shadowContainer variable is the root
<div> element. Setting
id property assures that the
id rule which we created earlier
will apply to this element.
We need to set the
left properties to those of the
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.
classNamemust then be appended to the original
containerelement so that its position is reset.
Now it's time to create the shadow
<div> elements. This is done by calling
createElement() utility function with a
className but no
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
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
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
The code to set the
visibility property must be updated because it's now
baseContainer rather than the
container element. In the
Let's see how the drop shadow looks in the browser. Select the
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