jQuery.suggest plugin

jQuery.suggest v1.2.0

jQuery.suggest, a simple inline autosuggest jQuery plugin. It takes an array of terms as haystack and suggests the user the first item that matches what has been typed to this point. The suggestion is updated with every keystroke. Tab or Enter will accept the suggestion and update the input field accordingly.

If more than one match is found, a small indicator will appear underneath the input (you can still it via CSS as you wish). The user can then use the arrow up/down keys to cycle through the options.

The plugin has been tested using Jasmine. The test suite is included.

Installation

Simply include src/jquery.suggest.js in your HTML and you are good to go.

npm

Since version 1.2.0 you can also install jquery.suggest via npm:


npm install jquery-suggest

Usage

Markup


<input type="text" name="search" id="search" />

Javascript


var haystack = ["ActionScript", "AppleScript", "Asp", "BASIC", ...];

$(function(){
  $('#container').suggest(haystack, {
    suggestionColor   : '#cccccc',
    moreIndicatorClass: 'suggest-more',
    moreIndicatorText : '&hellip;'
  });
});

Setting the suggestionColor setting is optional. It defaults to #cccccc.

moreIndicatorClass (default: suggest-more) can be used to style the small indicator, appearing when the plugin has found more than one suggestion.

Alternative HTML content for this indicator can be supplied using the moreIndicatorText (default: …) option

Demo

(Start typing the name of a programming language…)