Autocompleter.Local

Controls > Autocompleter.Local

Introduction

The local array autocompleter. Used when you’d prefer to inject an array of autocompletion options into the page, rather than sending out Ajax queries.

Syntax

new Autocompleter.Local(id_of_text_field, id_of_div_to_populate, array_of_strings, options);

The constructor takes four parameters. The first two are, as usual, the id of the monitored textbox, and id of the autocompletion menu. The third is an array of strings that you want to autocomplete from, and the fourth is the options block.

Extra local autocompletion options

Option	Default Value	Description
`choices`	10	How many autocompletion choices to offer
`partialSearch`	true	If false, the autocompleter will match entered text only at the beginning of strings in the autocomplete array. Defaults to true, which will match text at the beginning of any word in the strings in the autocomplete array. If you want to search anywhere in the string, additionally set the option fullSearch to true
`fullSearch`	false	Search anywhere in autocomplete array strings.
`partialChars`	2	How many characters to enter before triggering a partial match (unlike minChars, which defines how many characters are required to do any match at all).
`ignoreCase`	true	Whether to ignore case when autocompleting

It’s possible to pass in a custom function as the ‘selector’ option, if you prefer to write your own autocompletion logic. In that case, the other options above will not apply unless you support them.

Example

HTML


<p>
  <label for="bands_from_the_70s">Your favorite rock  band from the 70's:</label>
  <br />
  <input id="bands_from_the_70s" autocomplete="off" size="40" type="text" value="" />
</p>

<div class="autocomplete" id="band_list" style="display:none"></div>

Javascript


var bandsList = [
  'ABBA',
  'AC/DC',
  'Aerosmith',
  'America',
  'Bay City Rollers',
  'Black Sabbath',
  'Boston',
  'David Bowie',
  'Can',
  'The Carpenters',
  'Chicago',
  'The Commodores',
  'Crass',
  'Deep Purple',
  'The Doobie Brothers',
  'Eagles',
  'Fleetwood Mac',
  'Haciendo Punto en Otro Son',
  'Heart',
  'Iggy Pop and the Stooges',
  'Journey',
  'Judas Priest',
  'KC and the Sunshine Band',
  'Kiss',
  'Kraftwerk',
  'Led Zeppelin',
  'Lindisfarne (band)',
  'Lipps, Inc',
  'Lynyrd Skynyrd',
  'Pink Floyd',
  'Queen',
  'Ramones',
  'REO Speedwagon',
  'Rhythm Heritage',
  'Rush',
  'Sex Pistols',
  'Slade',
  'Steely Dan',
  'Stillwater',
  'Styx',
  'Supertramp',
  'Sweet',
  'Three Dog Night',
  'The Village People',
  'Wings (fronted by former Beatle Paul McCartney)',
  'Yes'
];

new Autocompleter.Local('bands_from_the_70s', 'band_list', bandsList, { });

CSS

Styling the div and the returned ul is very important:
Applying a visual cue that an item is selected allows the user to take advantage of the keyboard navigation of the dropdown and adding background colors, borders, positioning, etc to the div (as the demo does) allows the user interface elements to stand out. The CSS from the demo applied to the examples would be:


div.autocomplete {
  margin:0px;  
  padding:0px;  
  width:250px;
  background:#fff;
  border:1px solid #888;
  position:absolute;
}

div.autocomplete ul {
  margin:0px;
  padding:0px;
  list-style-type:none;
}

div.autocomplete ul li.selected { 
  background-color:#ffb;
}

div.autocomplete ul li {
  margin:0;
  padding:2px;
  height:32px;
  display:block;
  list-style-type:none;
  cursor:pointer;
}

Notes

You can also have your options provided via Ajax callbacks. For more information regarding this implementation, see Ajax.Autocompleter.

script.aculo.us