How to Create an Ajax Autocomplete Text Field: Part 8

By Rob Gravelle

Digg This Add to del.icio.us

Adding a Scrollbar

In the last installment, we added flexibility to the layout of the Autocomplete form elements by converting the HTML table-based design to a CSS one. We also introduced a means of passing parameters to an included JSP page in order to turn our Autocomplete text field into a versatile and self-contained Web control. This week we look at how to add a vertical scrollbar to the list. We're also going to use a parameter to set the list size, so a vertical scrollbar will appear when the number of items exceeds it, just like an HTML <SELECT> field (See Figure 1)

The Autocomplete List Container

Adding scrollbars to a table is problematic because they always expand to accommodate their contents. While it's possible to set a minimum height by setting the height attribute, nothing stops it from exceeding that value. The solution is to add a containing <DIV> around the table, since they support scrollbars and won't necessarily grow with their contents. We'll add some functionality to create and keep track of the containing <DIV> to the init() function. Here, we add the container variable to the global variable declarations:

var completeTable; var completeField; var autocompleteControl; var container;

We can create the <DIV> element in the same way that we created the <TABLE>, by using the DOM createElement( String tagName ) method. In the with closure, we set the ID to "container" so our ID rule will be applied to the <DIV> element. Now, we add the completeTable to the container <DIV> and add that to the autocompleteControl. The following code replaces the autocompleteControl.appendChild(completeTable); line:

// create the containing DIV var container = document.createElement("div"); with (container) { id = "container"; style.left = findPos(completeField).left - findPos(autocompleteControl)Left + "px"; style.top = autocompleteControl.clientHeight + "px"; appendChild(completeTable); } // autocompleteControl.appendChild(completeTable); autocompleteControl.appendChild(container);

The visibility must switched on again in the parseMessages() function in order to see the list:

container.style.visibility = "visible"; //replaces completeTable.style.visibility = "visible";

Similarly, the visibility must be turned off in the clearTable() function:

container.style.visibility = "hidden"; //replaces completeTable.style.visibility = "hidden";

The Container CSS Rule

In the AutocompleteControl.css file, we add a new rule for our container:

div#container { visibility: hidden; position: absolute; border: thin solid Gray; background: white; }

The position and border were transferred from the completeTable ID rule. The background was moved from the <TR> tag rule. The visibility property is set to "hidden" so the list won't appear until a character has been entered in the textbox, the results returned and added to the list.

If you were to try out the control in the browser, you would notice a border of one pixel around the table. That's a side effect from creating the table in JavaScript last week (See Figure 2)

There are two simple methods to remove the border. The first would be to set it in JavaScript using the border property, or we can set it in the CSS file by adding the following rule:

table#completeTable { border-collapse: collapse; }

The border-collapse property determines whether the table borders are collapsed into a single border or detached as in standard HTML. The space between the table cells is the result of the default detached border style, so collapsing it removes the space.

The Scrollbar CSS Class

The key to displaying a scrollbar is the overflow property, along with max-height. It tells the browser what to do when an element's height exceeds the max-height's value. There are four possible overflow values:

Value	Description
visible	Default. The content isn't clipped. It renders outside the element.
hidden	The content is clipped, but the browser doesn't display a scrollbar to see the rest of the content.
scroll	The content is clipped, but the browser displays a scrollbar to see the rest of the content.
auto	If the content is clipped, the browser should display a scrollbar to see the rest of the content.

The "scroll" and "auto" values are the only ones that cause a scrollbar to appear. The difference between the two is that "scroll" will always display the horizontal and vertical scrollbar tracks, minus the scrollbar, even when not required. The "auto" value will cause the scrollbar to only appear once the element exceeds its max-height. Since we don't want a horizontal scrollbar or track to appear, "auto" is the value we use.

Now for the bad news. The max-height property is only supported by DOM-compliant browsers; hence, Internet Explorer 7+ recognizes it, but not version 6. Previous versions of Internet Explorer do support the height property, which achieves almost the same effect, as we'll see later. The overflow-x and y properties are included for the Internet Explorer and Safari browsers because they will display both vertical and horizontal scrollbars without them. Here's what the scrollbar class rule should look like:

div.scrollbar { height: 100px; max-height: 100px; overflow: auto; overflow-y: auto; overflow-x: hidden; }

Let's have a look at our list in the browser to see how the scrollbar performs. 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 "100 pixels" that we set in the CSS file, we should see a vertical scrollbar. The following screenshot, which was taken in Internet Explorer 6, only displays a vertical scrollbar, because it's using the overflow-x and y properties (See Figure 3).

We're getting there, but there are still a few issues to contend with:

1. Most browsers don't increase the width of the containing <DIV> to adjust for the scrollbar, so it's clipping the right sixteen-or-so pixels of the table.
2. Another, more apparent problem is that, in Internet Explorer 5/6, the substitution of height for the max-height property hasn't served us well. If the list height is less that 100 pixels, it remains at that size (See Figure 4).
3. Finally, since we're setting the list size in pixels, and not by number of items, the vertical scrollbar could appear when it's not really necessary, as in this case (See Figure 5)