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

How to Create an Ajax Autocomplete Text Field - Part 7 [con't]

The `<jsp:include>` and the `<jsp:param>` Elements

If a <jsp:include>'s resource is dynamic, the request is sent to the included resource, the included page is executed and the result is included in the response from the calling JSP page. The <jsp:include> tag provides a means to pass name/value pairs to the included resource via the <jsp:param> element. We can take advantage of these features to pass some attributes to the AutocompleteControl JSP page. Here's what the include directive would look like using the <jsp:include> tag, along with some <jsp:param> element to set various options:

The Autocomplete JSP Page

On the included resource, you can retrieve the parameters by using the getParameter("paramName") method of the request object. Used in conjunction with the <%= %> output shorthand, you can display the variable or use it in a client-side script. A JavaScript at the top of the AutocompleteControl.jsp file sets the parameters to JavaScript variables to be used in the AutocompleteControl.js script:

Most of these values can now be set in the init() function. To do so, we'll need a reference to the label, searchButton and searchBtnDiv page elements:

Next, we'll include some functions to set the various properties:

The `setCssPath()` Function

Adding the cssPath parameter to the control gives the user the option of changing the path to the CSS file. All that's required is to set the href property of the stylesheet (<link>) element. The if statement checks to see if a cssPath parameter was supplied, because an empty string evaluates to false. It's also critical that the browser supports the styleSheets collection. We can obtain a reference to the collection element that contains the Autocomplete CSS file by using its ID. Some browsers allow you to set the href property directly, while others only expose it via the setAttribute(attributeName, value) function. The setCssPath() function is pretty basic and doesn't validate the path for syntactical correctness, but the good news is that the worst that can happen is the control won't display correctly!

The `setLabelText()` Function

Setting the label is just a matter as changing the text between the <div> tags. The three conditions that must exist for the label to be set are:

the global labelText variable has been set to a non-blank value.
the label's <div> tag was successfully retrieved via the document.getElementById() function.
The label <div>'s nested contents are of type #text. There is also a nodeType property that returns an integer, but the nodeName is more readable.

The nodeValue property is used to change the <div>'s text:

The `setEltClass()` Function

The class variables allow the user to override the default CSS selectors for the element in question. This could be a good idea because long labels don't wrap by default! There are only two conditions to evaluate here: the className and elt arguments must be populated with something. The className is one property that can be set directly in most if not all browsers:

The `setButtonText()` Function

Setting the button text is much easier than the label, because the input button element has a read/write value property that we can set directly:

The JavaScript File Paths

The AutocompleteControl and JSON parser JavaScript file paths have to be handled differently than the other properties. For starters, the script can't be in the Autocomplete.js file because it hasn't been set yet! Therefore, it's best to load the JavaScripts dynamically.

Both script paths are set in the addJsScript(string path) function. The default paths are provided when the jsPath and jsonParserPath parameters haven't been supplied:

The addJsScript() function uses the DOM createElement(string tagName) function to create the new script. The type is set to "text/JavaScript" and the src is set to the scriptPath argument. The new script is added to the top of the the page by obtaining a reference to the current script element and calling the insertBefore() function on its parentNode:

Here's a ZIP file containing the new and modified AutocompleteCSS project files.

This week we made our Autocomplete text field into a versatile and self-contained Web control and added flexibility to the layout by converting the HTML <TABLE> to a CSS-based design. Next week, we'll explore how to add a vertical scrollbar to the list.