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: ...

Get Prototype and Scriptaculous: Taking the Pain out of JavaScript now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial