J Query Autocomplete

Autocomplete an input field to enable users quickly finding and selecting some value from a set provided by the server. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries 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, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook.

See also JQueryjaxHelper for examples on how to integrate autocompletion into Foswiki.

Caution: the original author of this plugin discontinued to support this plugin. A replacement has been added to the J Query UI package. Here is a Migration Guide for the autocompletion plugin.

Usage

Autocompletion is activated for HTML input elements whose autocomplete attribute value does not equal off. It can either be list of candidate values, or an URL, in which case candidate values are queried from an AJAX backend. The current input prefix is provided via the q URL parameter. The backend must return a list of matching values separated by newlines.

Example

This example queries candidate values from a simple AJAX backend using the wiki application in the data section of this topic.

See also J Query Textbox List

First, here's the set of values we want to pick from:

• backup
• bash
• emulation
• games
• irc
• linux
• mercurial
• patches
• perl
• php
• python
• site
• surfing
• tag
• test
• foswiki
• web
• wiki
• windows
• windsurfing
• wine

Here's the code that the client browser runs:

And here's the section of this topic that provides the data: ' backup bash emulation games irc linux mercurial patches perl php python site surfing tag test foswiki web wiki windows windsurfing wine '

%STARTSECTION{"data"}%%SEARCH{
 "^   \* (%ENCODE{"%URLPARAM{"q"}%" old="$comma, " new="|,"}%).*$"
 web="%WEB%"
 topic="%TOPIC%"
 type="regex"
 multiple="on"
 nonoise="on"
 format=" $pattern(.*?\* ([^ ]*).*) "
 separator="$n"
}%
%ENDSECTION{"data"}%

Alternative implementation using FilterPlugin

If you don't have Foswiki 1.1, you can use the Foswiki:Extensions.FilterPlugin which has the capability to filter a list based on a regular expression passed from Javascript.

%STARTSECTION{"data_fp"}%%FORMATLIST{
" 
  backup
  bash
  emulation
  games
  irc
  linux
  mercurial
  patches
  perl
  php
  python
  site
  surfing
  tag
  test
  foswiki
  web
  wiki
  windows
  windsurfing
  wine
"
 include=".*%URLPARAM{"q"}%.*"
 split="\n"
 format=" $1 "
 separator="$n"
}%%ENDSECTION{"data_fp"}%