How to Create an Ajax Autocomplete Text Field: Part 8 [con't]
The following line can be added anywhere in the
init() function after we've
initialized the other variables:
testForMaxHeightSupport() function, a
<DIV> is created with the
maxHeightTest. Then, a child
<DIV> is added to it with
a much larger
height. Once the
outerDiv has been appended to the
AutocompleteControl, we can determine whether or not the
has kicked in by comparing the
clientHeight to the
maxHeight will cause the scrollbar to appear instead
of expanding the
outerDiv to accommodate the contents of the
Like a black hole, we don't need to see it to know that it's there!
Remove the Height Properties from the CSS File
We can now remove the
max-height properties from the
CSS file since we're setting them in code. We can also dispense with the
y properties because the
setListWidth() function guarantees that
the list will never require a horizontal scrollbar:
AutocompleteSearchCSS.jspfile 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 retrieve a long list. Since the table
height will exceed the value of "4" rows that we set in the
AutocompleteControl's <Param> tag, we should see a vertical scrollbar.
When the list contains more than 4 items, the scrollbar appears, and the width of the scrollbar has been accounted for (See Figure 6).
After typing a second "s", the results narrows down to two rows, and the list resizes accordingly by removing the scrollbar and extra padding on the width (See Figure 7).
listSize of "4" to the
the scrollbar when displaying four items because the
height is calculated
to be an exact multiple of the row height (See Figure 8).
Controlling the Appearance of the Scrollbar
There are several CSS properties available to make the scrollbar better suit
your page's color scheme, at least in browsers that support them. All of these
properties accept a color name (red), an RGB value of 255,0,0, or a hex
The simplest to use the
scrollbar-base-color property affects
the scrollbar's overall color (See Figure 9).
If that doesn't provide you with enough control, there are properties for every part of the scrollbar and track (See Figure 10).
Here's what our list looks like using a cool blue color scheme (See Figure 11).
The ScrollbarColor Class
We can store all of the scrollbar color properties in a new class that we'll
Like the other properties, we'll pass the
scrollbarColor class name
as a parameter in the AutocompleteSearchCSS JSP page. That allows us to
store different collections of colors for different color schemes:
init() function, we'll assign the
className along with the other
Here's a ZIP file containing the new and modified AutocompleteCSS project files.
I hope you enjoyed today's article on adding a vertical scrollbar to the Autocomplete list. Next week we'll implement search string matching and learn how to add a CSS dropshadow effect to the list. In the meantime, feel free to peruse some of the following Web sites. The online color designer is especially cool!
- Dynamic properties in Internet Explorer
- The Internet Explorer
- The scrollbar-base-color CSS property
- All about scrollbar coloring with CSS
- An outstanding free online scrollbar color designer
Original: June 5, 2008