Example

autocomplete
multiautocomplete
Here the suggestions are document types, give "ho" (for Home) a try.
The datasource is an Ajax-url, provided to the widget.


View Source
 <script>
  $(function(){
    pluginAutocomplete('input.autocomplete',function() {
      $('input.autocomplete').autocomplete("ajaxGetObjOptions", {
        width: function() { return this.css( "width");},
        selectFirst: false
      });
      $("input.autocomplete").result(function(event, data, formatted) {
        if (data) {
          $(this).parent().next().find("input").val(data[1]);
        }
      });
    });
  });
 </script>
 <input type="text" name="autoomplete" class="autocomplete"/>


Overview

Autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to enter previous selected values, for example you could use Autocomplete for entering tags, to complete an address, you could enter a city name and get the zip code, or maybe enter email addresses from an address book.

You can pull data in from a local and/or a remote source: Local is good for small data sets (like an address book with 50 entries), remote is necessary for big data sets, like a database with hundreds or millions of entries to select from.

The Autocomplete plugin expects a URL resource that will return plain text. It can only be on the same host. The request parameter "q" gets added to that URL.



Options

Self-Learning
If you keep the keys free of DTML the autocomplete-fields will be self-learning. New phrases will be added to the key-set automagically.


References