At the Forge - Scriptaculous
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.)
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>
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
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.
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.
|HPC Cluster Grant Accepting Applications!||Jan 28, 2015|
|Sharing Admin Privileges for Many Hosts Securely||Jan 28, 2015|
|Red Hat Enterprise Linux 7.1 beta available on IBM Power Platform||Jan 23, 2015|
|Designing with Linux||Jan 22, 2015|
|Wondershaper—QOS in a Pinch||Jan 21, 2015|
|Ideal Backups with zbackup||Jan 19, 2015|
- Sharing Admin Privileges for Many Hosts Securely
- HPC Cluster Grant Accepting Applications!
- Red Hat Enterprise Linux 7.1 beta available on IBM Power Platform
- Internet of Things Blows Away CES, and it May Be Hunting for YOU Next
- Designing with Linux
- Ideal Backups with zbackup
- Wondershaper—QOS in a Pinch
- Slow System? iotop Is Your Friend
- diff -u: What's New in Kernel Development
- Hats Off to Mozilla
Editorial Advisory Panel
Thank you to our 2014 Editorial Advisors!
- Jeff Parent
- Brad Baillio
- Nick Baronian
- Steve Case
- Chadalavada Kalyana
- Caleb Cullen
- Keir Davis
- Michael Eager
- Nick Faltys
- Dennis Frey
- Philip Jacob
- Jay Kruizenga
- Steve Marquez
- Dave McAllister
- Craig Oda
- Mike Roberts
- Chris Stark
- Patrick Swartz
- David Lynch
- Alicia Gibb
- Thomas Quinlan
- Carson McDonald
- Kristen Shoemaker
- Charnell Luchich
- James Walker
- Victor Gregorio
- Hari Boukis
- Brian Conner
- David Lane