How to Create an Ajax Autocomplete Text Field - Part 8 / Page 3

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:

In the testForMaxHeightSupport() function, a <DIV> is created with the ID of 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 max-height property has kicked in by comparing the innerDiv's clientHeight to the outerDiv's. The maxHeight will cause the scrollbar to appear instead of expanding the outerDiv to accommodate the contents of the innerDiv. 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 height and max-height properties from the CSS file since we're setting them in code. We can also dispense with the overflow-x and y properties because the setListWidth() function guarantees that the list will never require a horizontal scrollbar:

Let's examine our fixes in a 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 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).

Assigning a listSize of "4" to the <jsp:parameter> removes 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 number of #ff0000.

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 call scrollbarColor:

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:

Be sure to set the parameter to a JavaScript variable in the AutocompleteControl JSP page:

In the init() function, we'll assign the className along with the other container properties:

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!

References:

Original: June 5, 2008

Digg This Add to del.icio.us

[prev]