Home ›

At the Forge - Scriptaculous

Issue 154

From Issue #154
February 2007

Feb 01, 2007  By Reuven M. Lerner
 in
Scriptaculous is a spectaculous set of libraries for Ajax.
Autocomplete

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'], { });
</script>

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.

Listing 2. complete.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head><title>Special effects</title>

    <script src="/javascripts/prototype.js"
type="text/javascript"></script>
    <script src="/javascripts/scriptaculous.js"
type="text/javascript"></script>
  </head>

  <body>
    <h2>Enter your favorite distribution</h2>
    <p><input type="text" id="distro" name="distro_text_field"
autocomplete="off" /></p>
    <div class="auto_complete" id="distro_complete"
style="display:none"></div>

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

  </body>
</html>

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.

Conclusion

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 altneuland.lerner.co.il.

______________________

Comments

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
Submitted by Randy Kramer (not verified) on Wed, 03/28/2007 - 16:39.

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
Submitted by Anonymous (not verified) on Sun, 08/26/2007 - 22:13.

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

White Paper
More Resources
Fabric-Based Computing Enables Optimized Hyperscale Data Centers

Today’s modular x86 servers are compute-centric, designed as a least common denominator to support a wide range of IT workloads. Those generic, virtualized IT workloads have much different resource optimization requirements than hyperscale and cloud applications. They have resulted in a “one size fits all” enterprise IT architecture that is not optimized for a specific set of IT workloads, and especially not emerging hyperscale workloads, such as web applications, big data, and object storage. In this report, you will learn how shifting the focus from traditional compute-centric IT architectures to an innovative disaggregated fabric-based architecture can optimize and scale your data center.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions