Autocompleter Demo

This is an example of the "Ajax.Autocompleter" class in Scriptaculous.

If you type the first few characters of a city name into the input box above, a list of possible completions will appear. You can use the up/down arrow keys to select one of the options in the list, then press return. The zip code will be entered into the box. If you type one or more characters of a zip code into the box, the same thing will happen -- again, only the zip code will be entered in the end.

This example works with the url http://math.hws.edu/eck/ziplist.php, which returns a list of cities and zip codes that match a parameter named "zip". You can access it directly as, for example, http://math.hws.edu/eck/ziplist.php?zip=gen.

Simple Animation Demo

Here is a solution to the first exercise in Lab 2, with some added Scriptaculous animation to make the messages to the user fade in and out. Note the use of "queue: end" (in the source code for this page) to make sure that animations don't overlap.

Parallel Animation Demo

Here is a solution to the second exercise in Lab 2. It uses a Scriptaculous "Effect.Parallel" to grow all the bars at the same time.