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.
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.
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.
References
Original: June 9, 2008
Digg This
Add to del.icio.us
Find a programming school near you
