O'Reilly logo

Prototype and Scriptaculous: Taking the Pain out of JavaScript by Chris Angus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

4.5. AutoCompletion

Creating an auto-completing text box in Scriptaculous works as follows. First, create a input field and a div to hold the option set:

<input  id="input_name" name="autocomplete_param" size="30" type="text" value="" />
<div class="auto_complete" id="input_name_auto_complete">

We then create an autocompleter object, which references this:

new Ajax.Autocompleter('input_name', 'input_name_auto_complete', 'options.html', {})

Rather than reference a web service, we create a file options.html containing:

<ul>
    <li>option1</li>
    <li>option2</li>
    <li>option3</li>
    <li>option4</li>
    <li>option5</li>
    <li>option6</li>
</ul>

Finally, we style the retuned list to look like a combo:

<style>   div.auto_complete {
            width: 350px;
            background: #fff;
          }
          div.auto_complete ul {
            border:1px solid #888;
            margin:0;
            padding:0;
            width:100%;
            list-style-type:none;
          }
          div.auto_complete ul li {
            margin:0;
            padding:3px;
          }
          div.auto_complete ul li.selected {
            background-color: #ffb;
          }
          div.auto_complete ul strong.highlight {
            color: #800;
            margin:0;
            padding:0;
          }
  </style>
Example 4-5. autocomplete.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <title>Using Scriptaculous</title> <script src="js/prototype.js" ></script> <script src="js/scriptaculous.js"></script> </head> <body> <p> Autocomplete </p> <style> div.auto_complete { width: 350px; background: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required