RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Script.aculo.us Controls: Do Your Web Users a Favor : Page 3

Learn how to integrate Script.aculo.us web controls into your web applications to make the end-user experience more pleasant.

Using Autocompleter Customization
You've already seen that the Ajax.Autocompleter constructor accepts four parameters (the fourth being an optional literal object used to customize the autocompleter). Table 1 shows the most used properties of this object accompanied by short descriptions.

Table 1. Ajax-based Autocompleter Customization Options
Option Description
paramName This property is the name to use for the parameter sent to the server. It defaults to the text box name and its value is represented by the string typed by the user.
frequency This property is the time—since the last character inserted by the user—to wait before sending the request to the server. It defaults to 0.4 seconds.
minChars This property is the number of characters after which the search starts. It defaults to 1.
parameters This property is for further parameters to send to the server. They must have a query string format (e.g., param1=value1&param2=value2...).
indicator This property is the ID of an HTML element to display during the data fetching. Generally it is a GIF that indicates a data loading.
updateElement This property is the callback function to call when the user chooses an option from the list. The default function inserts the item chosen in the text box.
afterUpdateElement This property is the callback function to invoke after updateElement is called. No function is defined by default.

The following code example uses some of the options in Table 1. It creates an autocompleter that sends the request to the server after the user inserts at least two characters and after half a second has passed since the user last typed a character:

new Ajax.Autocompleter(
          minChars: 2,
          frequency : 0.5,
          indicator : "loadingGif",
          afterUpdateElement : function(){alert($F("autoCompleteTextField"));},

Furthermore, the above code displays the HTML element with loadingGif as the ID and shows an alert box containing the chosen item after the user chooses it from the list. Try using this code with the ajax-autocomplete-options.htm file in the code download for this article.

You can use the options in Table 1 in the local autocompleter as well—even if some of them, such as parameters, don't make sense for the local counterpart.

Using Local Autocompleter
Besides the Ajax-based autocompleter, Script.aculo.us lets you use a local autocompleter as well. But what does local autocompleter mean? Basically, it is an autocompleter whose data are stored locally within a JavaScript array instead of in a server. The following example shows how to build a local autocompleter:

new Autocompleter.Local(

          minChars: 2

As you can see, it is very similar to the Ajax-based autocompleter except for the third parameter, which is a JavaScript array instead of a server-side component URL. (You can find a fully functional example in the local-autocomplete.htm file of the downloadable code.) Table 2 shows the parameters you can use to customize a local autocompleter—besides the ones already shown in Table 1.

Table 2. Local Autocompleter Customization Options
Option Description
choices This property is the maximum number of items to display within the list. It defaults to 10.
partialChars This property is related to partialSearch and is the number of characters to type before even trying a partial match.
partialSearch This property is a boolean value that indicates if the partial search must be enabled. It true, the beginning of each word is checked against the match. It is true by default.
fullSearch This property is a boolean value that, if true, checks for a match not only at the beginning of the word but also within it. For example, if you search mil, then both Milan and Hamilton will match.
ignoreCase This property is a boolean value that indicates whether the search must be case-insensitive. It's true by default.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date