jQuery Lookup Plugin

A jQuery plugin which allows partial autocomplete features on a textarea element based on a trigger character.

Usage

$("#myTextArea").lookup({ data: { "#" : ["a", "b", "c"] } });

Once the plugin is applied to a textarea element, the trigger character, in this case '#', will open a menu which changes with further characters to create a selection of matching phrases.

  • The UP and DOWN arrows can be used to highlight an option from the menu.
  • The RETURN, TAB and SPACE (if enabled) keys can be used to select an option from the menu.
  • The ESC key is used to cancel a lookup and close the menu.
  • The MOUSE can also be used to make a selection.

Default function

No options are required other than the data options you wish searched and the trigger character for that dataset.

$("#myTextArea").lookup({
 data: { "@" : ["bananas", "apples", "pears"] }
});

Adding options

Options are available if you wish to change the trigger character, add additional trigger characters for different datasets, or set the amount of results shown (default: 4)

$("#myTextArea").lookup({
 data: { 
  ">" : ["car", "bus", "plane", "bicycle", "train"], 
  "#" : [ "cycle", "drive", "fly", "run", "walk"] 
 },
 limit : "5"
});

Options

dataan array of strings which will be searched during the lookup (required).
limitthe maximum matching strings to be displayed during a lookup (default: 4).
spaceSelectionallow the space character to make a selection of the current lookup (default: true).

Testing

The compatibility I have managed to test is below, covering some of the latest browser versions:

Firefox 4 Safari 5.0.2 Chrome 10.0.648.204 Internet Explorer 8
(with current exception of mouse selection)

Download

aw20.lookup.js.zip

Installation

The jQuery library should already be imported on the page (1.5.2 or above recommended).

The following files must also be imported on the page:

  • aw20.lookup.js - the plugin workings
  • aw20.lookup.css - the plugin styling

Licence Information

Copyright 2011, aw2.0 Ltd

Dual licensed under the MIT or GPL Version 2 licenses - jquery.org/license.

Support for getInputSelection from stackoverflow.com

Quicklinks