At the Forge - Scriptaculous

Scriptaculous is a spectaculous set of libraries for Ajax.

Effects are certainly an important and impressive part of Scriptaculous; the library comes with many effects, and there are numerous ways to combine and invoke them. However, Scriptaculous offers much more than merely a bunch of effects. It also includes some user-level functionality JavaScript programmers might want.

One such example, popularized by Google Suggest (and its cousin in Firefox 2.0) is an autocompleting text field. Such a text field lets you enter whatever contents you want, but if what you have entered so far matches a known text string, you are offered the chance to complete it. This is similar in many ways to the combo box widget that was long popular on Windows systems, but which was unavailable to Web applications. (Some Scriptaculous users have created derivatives of the Autocompleter class that is more similar to a combo box.)

Scriptaculous comes with two different types of autocompleting text fields, differing only in how the completion list is filled. In the first case, known as Autocompleter.Local, the list of matches is set in JavaScript. The related text field, Ajax.Autocompleter, uses Ajax to retrieve a list of matches from a remote HTTP server. The two are similar enough in spirit that I demonstrate only Autocompleter.Local here for the sake of simplicity.

In order to use Autocompleter.Local, we first create a text field, just as we would do in an HTML form:

<input type="text" id="distro" name="distro_text_field"
   autocomplete="off" />

Notice that I have included the setting autocomplete="off" in the above field. The autocomplete attribute, which is used only by Microsoft's Internet Explorer, is set here to off to ensure that IE users aren't unpleasantly surprised by dueling completion systems.

Next, we create a <div> section with an ID attribute. In addition, we set the style attribute to keep the div hidden until we modify its styling:

<div id="distro_complete" style="display:none"></div>

Finally, we add some JavaScript that creates a new Autocompleter.Local object:

<script type="text/javascript">
    new Autocompleter.Local('distro', 'distro_complete',
    ['Red Hat', 'Fedora Core', 'Debian', 'Gentoo', 'Knoppix',
     'Ubuntu', 'Kubuntu'], { });

The constructor for Autocompleter.Local takes four arguments: the ID of the text field, the ID of the div into which we'll insert completions, an array containing the completion strings and a set of options (currently empty). If you try to put this code in the <head> of your document, it will fail with odd errors, because the text field and div must exist before the code is executed.

By including the above in an HTML page (as in Listing 2), you set the stage for autocompletion to work. Whenever the user loads the page and types a letter into the text field, Scriptaculous waits for 0.4 seconds of inactivity. If the user isn't typing, and if the text field already contains one or more characters, Autocompleter.Local tries to find a match from the current list. If it finds one, it fills in the rest of the text field.

If it finds more than one (as would happen to a user typing K in our example, which matches both Kubuntu and Knoppix), the system displays a menu of options, from which the user may choose by typing or clicking.


Protoype is a library aimed at the JavaScript that endeavors to solve many programmers' needs. However, Prototype's functionality extends only so far as the programmer; it doesn't offer any direct GUI improvements. Given that JavaScript is largely used to handle the GUI in a Web application, it shouldn't come as a surprise that there are several libraries built on top of Prototype to handle such tasks. Scriptaculous appears to be one of the best known of these, and in my experience, there's good reason for that.

There are several functions of Scriptaculous that we didn't get to explore this month, including drag and drop and JavaScript unit testing. This last item is probably of note even for JavaScript programmers who have no intention of creating GUI effects.

Resources for this article: /article/9505.

Reuven M. Lerner, a longtime Web/database consultant, is a PhD candidate in Learning Sciences at Northwestern University in Evanston, Illinois. He currently lives with his wife and three children in Skokie, Illinois. You can read his Weblog at



Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Line length

Randy Kramer's picture

The first line of this article is 108 characters long, is too wide for my 21" screen (admittedly at the font size that I've selected), and will not wrap to a narrower width.

[rhk@s14 askRhk]$ echo "Ajax is the hot new Web development paradigm that uses JavaScript to send and then handle asynchronous HTTP" | wc
1 18 108

Surely you can do better!

so many articles that say

Anonymous's picture

so many articles that say the same thing. Link scriptaculous page and prevent duplicity of information.
u didnt give nothing new. just repeat.