Ajax auto complete taglib ver. 1.2

    JSP custom taglib for UI development. This taglib lets you create a text input field (like a normal HTML input tag) with some associated list of predefined values. So your users will be able not only type a value but also select it from the some list. And predefined values will be obtained from your server-side via Ajax call. Tag is similar to our Ajax input taglib. For example:
 


<script language="JavaScript" src="cjajax.js"></script>
<%@ taglib uri="taglib.tld" prefix="ac" %>

Product:
<ac:autocomplete name="a" url="getHelp.jsp" listBackground="white">
</ac:autocomplete>

and you will get some like this (start typing with J):

Product:

Tag assumes that your server side returns XML with data for the popup window. E.g.:
 


<?xml version="1.0" encoding="ISO-8859-1" ?>
<ajaxinput>
<option>Jdeveloper</option>
<option>JBuilder</option>
etc.
</ajaxinput>

Tag will parse the response and fill your popup window with the provided options. Note: if you are generating XML in JSP file make sure there are no empty lines or white space before the <?xml ... ?> line. Also in your XML response you can use any name for the root node as well as any names for the nodes. Also you can provide your own CSS styles for the returned options:
 


<?xml version="1.0" encoding="ISO-8859-1" ?>
<root>
<option style="color:green">Jdeveloper</option>
<option class="myclass">JBuilder</option>
etc.
</root>

In order to use this tag you have to describe an external JavaScript file cjajax.js on your page.

You have to use this tag inside of HTML form (or form taglib from Coldtags suite).

Tags are:

autocomplete

Body tag mimics HTML input tag and requests the predefined values via Ajax. Parameters are:

1) name Describes a name for your input field
2) id Optional parameter. Describes a DHTML id for your input field.
3) className Optional parameter. Describes a CSS class for your input element
4) style Optional parameter. Describes your own CSS style.
5) size Optional parameter. Describes a size for your input tag
6) value Optional parameter. Describes an initial value for your input tag.
7) listBorderWidth Optional parameter. Describes a width for the border in your list. Default value is 1px.
8) listBorderColor Optional parameter. Describes a color for list's border. Default value is black.
9) listWidth Optional parameter. Describes a width for your list. Default value is 180px.
10) listHeight Optional parameter. Describes a height for your list. Default value is 80px.
11) listBackground Optional parameter. Describes a background for your list.
12) listClassName Optional parameter. Describes list's CSS class.
13) url Optional parameter. Describes an URL for your server-side
14) urlFunction Optional parameter. Describes a name for JavaScript function that will return an URL
15) param Optional parameter. Describes a name for the parameter with the current value. Default value is value.
16) minLength Optional parameter. Describes a minimal length for the current value when Ajax call will be made. Default value is 1.
17) beforeAction Optional parameter. Describes a name for your own JavaScript function that will be called at the beginning of request. By default is empty.
18) afterAction Optional parameter. Describes a name for your own JavaScript function that will be called at the end of request. By default is empty.

for downloading:

Library: autocompletetag.jar    Description: taglib.tld
JavaScript library: cjajax.js

© Coldbeans      Comments?

See also Coldtags suite - the largest collection of custom JSP tags.

Also in Coldtags: