jQuery-Suggester

KO | EN

gitlite — search

#javascript #ai #typescript #llm #go #deep-learning #linux #docker #kubernetes #vue #awesome-list #pytorch #openai #mcp

jQuery-Suggester

(★ 8)

Flexible Facebook-like auto-complete widget for jQuery

jQuery-Suggester Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Suggester - A Better Autocomplete Widget
=

Version 1.4.0, Aug 2014, MIT License

[Download](https://github.com/kensnyder/jQuery-Suggester/blob/master/Suggester-1.4.0-Download.zip?raw=true), [Demos](http://sandbox.kendsnyder.com/jQuery-Suggester/demos/), [Unit tests](http://sandbox.kendsnyder.com/jQuery-Suggester/test/index.html)

Usage: `var suggester = new $.Suggester($input, options);`

Table of Contents
-

<ul>
	<li><a href="#introduction">Introduction</a></li>
	<li><a href="#how-to-use">How to Use</a></li>
	<li><a href="#options">Options</a></li>
	<li><a href="#events">Events</a></li>
	<li><a href="#instance-properties">Instance Properties</a></li>
	<li><a href="#static-properties">Static Properties</a></li>
	<li><a href="#instance-methods">Instance Methods</a></li>
	<li><a href="#static-methods">Static Methods</a></li>
	<li><a href="#more-examples">More Examples</a></li>
	<li><a href="#changelog">Changelog</a></li>
	<li><a href="#contributing">Contributing</a></li>
	<li><a href="#reporting-bugs">Reporting Bugs</a></li>
	<li><a href="#license">License</a></li>
</ul>

Introduction
-

Turn a text input into a Facebook-style multiple-tag input. Features include:

* Load data from a JavaScript array, object, json url, or jsonp url
* Lots of options
* Populates original input with chosen tags but also creates hidden inputs with ids and tag text
* Has methods to add a tag programmatically (e.g. user chooses a popular tag)
* CSS is easy to extend and customize
* CSS uses em units so that you can easily size the widget however you like
* You can subscribe to any of 20+ events that allow you to inject custom functionality into nearly every action
* You can define your own HTML structure for the widget output
* Object-oriented structure makes it easy to extend
* Unit tested - [Unit tests](http://sandbox.kendsnyder.com/jQuery-Suggester/test/index.html) 
* Works on IE8+, FF, Chrome, Safari
* 5kb minimized and gzipped
* Compatible with AMD

How to Use
-

Suggester is compatible with jQuery 1.5+ and has been unit tested with jQuery 1.9. Download the files in [Suggester-1.4.0-Download.zip](https://github.com/kensnyder/jQuery-Suggester/blob/master/Suggester-1.4.0-Download.zip?raw=true) and copy them to your scripts directory. Include them in your document's after jQuery is included:

```html
<script src="/js/Suggester.min.js"></script>
<link href="/js/Suggester.min.css" rel="stylesheet" />
```

Then somewhere in your code, call:

```javascript
var instance = new $.Suggester(selector, options);
// OR
$(selector).suggester(options);
```

See the documentation below for a full list of options.

Options
-

<table>
	<tr>
		<th>Type</th>
		<th>Option Name</th>
		<th>Default</th>
		<th>Description</th>
	<tr>
	<tr>
		<td>{Array|Boolean}</td>
		<td>data</td>
		<td>false</td>
		<td>Initial data to use for suggestions</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>valueProperty</td>
		<td>&quot;value&quot;</td>
		<td>The name of object property that should be used as the tag&#x27;s value. Only applicable when options.data is set</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>labelProperty</td>
		<td>&quot;value&quot;</td>
		<td>The name of object property that should be used as the tag&#x27;s display text. Only applicable when options.data is set</td>
	</tr>
	<tr>
		<td>{Array}</td>
		<td>searchProperties</td>
		<td>Array(&quot;value&quot;)</td>
		<td>The array of object property names that should be searched when generating suggestions. Only applicable when options.data is set</td>
	</tr>
	<tr>
		<td>{String|Number}</td>
		<td>matchAt</td>
		<td>&quot;anywhere&quot;</td>
		<td>Where to match when finding suggestions. It can be &quot;anywhere&quot;, &quot;start&quot;, &quot;end&quot; or an integer. Only applicable when options.data is set</td>
	</tr>
	<tr>
		<td>{Boolean}</td>
		<td>caseSensitive</td>
		<td>false</td>
		<td>If true, find matches regardless of case. Only applicable when options.data is set. Only applicable when options.data is set</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>dataUrl</td>
		<td>false</td>
		<td>Url to call to get json or jsonp results. Use %s to indicate where search text should be inserted. e.g. &quot;http://example.com/myjson?query=%s&quot; or &quot;http://example.com/myjsonp?query=%s&amp;callback=%s&quot;</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>dataType</td>
		<td>&quot;json&quot;</td>
		<td>Can be &quot;json&quot; or &quot;jsonp&quot;. If json, options.dataUrl needs to be in the format &quot;http://example.com/myjsonp?query=%s&amp;mycallback=%s&quot;. To handle xml, you&#x27;ll need to register BeforeFetch and AfterFetch handlers or overwrite the fetchResults method</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>fly</td>
		<td>&quot;down&quot;</td>
		<td>Which way should the suggestion box fly. If &quot;up&quot;, the suggestion box will appear before the input box in the DOM tree. A css class of &quot;sugg-fly-up&quot; or &quot;sugg-fly-down&quot; is applied to the widget element based on this value</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>suggListPosition</td>
		<td>&quot;relative&quot;</td>
		<td>If &quot;absolute&quot;, the suggestion box will be appended to &lt;body&gt; and positioned and sized each time it is opened. This is useful for widgets within table elements</td>
	</tr>
	<tr>
		<td>{Boolean}</td>
		<td>multiselect</td>
		<td>true</td>
		<td>If true, allow multiple tags</td>
	</tr>
	<tr>
		<td>{Boolean}</td>
		<td>preventDuplicates</td>
		<td>true</td>
		<td>If true, the first tag will be removed when a duplicate is typed in</td>
	</tr>
	<tr>
		<td>{Boolean}</td>
		<td>omitAlreadyChosenItems</td>
		<td>true</td>
		<td>If true, don&#x27;t suggest items that have already been chosen as tags. Only applicable when options.data is set</td>
	</tr>
	<tr>
		<td>{Number}</td>
		<td>minChars</td>
		<td>3</td>
		<td>The minimum number of characters a user must type before the suggestion box will appear. If 0, show choices when input is simply focused (like a faux select widget)</td>
	</tr>
	<tr>
		<td>{Number}</td>
		<td>keyDelay</td>
		<td>200</td>
		<td>The number of milliseconds between keystrokes before the suggestion lookup begins</td>
	</tr>
	<tr>
		<td>{Boolean}</td>
		<td>addOnComma</td>
		<td>true</td>
		<td>If true, typing a comma will add the current text as a tag</td>
	</tr>
	<tr>
		<td>{Boolean}</td>
		<td>addOnTab</td>
		<td>true</td>
		<td>If true, typing a tab will add the current text as a tag</td>
	</tr>
	<tr>
		<td>{Boolean}</td>
		<td>addOnSemicolon</td>
		<td>false</td>
		<td>If true, typing a semicolon will add the current text as a tag</td>
	</tr>
	<tr>
		<td>{Boolean}</td>
		<td>addOnSubmit</td>
		<td>true</td>
		<td>If true, add tag on submit if user has entered text but not typed comma or tab</td>
	</tr>
	<tr>
		<td>{Boolean}</td>
		<td>addOnBlur</td>
		<td>false</td>
		<td>If true, add tag on blur if user has entered text but not typed comma or tab</td>
	</tr>
	<tr>
		<td>{Boolean}</td>
		<td>submitOnEnter</td>
		<td>false</td>
		<td>If false, prevent the form from submitting when the user presses enter on the empty input</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>inputSize</td>
		<td>auto</td>
		<td>Manually set the input size property to a certain width. If auto, set size to text width</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>placeholder</td>
		<td></td>
		<td>Placeholder text to display when no tags are present. e.g. &quot;Enter tags...&quot;</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>emptyText</td>
		<td></td>
		<td>Message to show when there are no suggestions - default is &quot;(Type a comma to create a new item)&quot;</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>prompt</td>
		<td></td>
		<td>Message to display in suggestion list when below min char length</td>
	</tr>
	<tr>
		<td>{Number}</td>
		<td>maxSuggestions</td>
		<td>10</td>
		<td>Only display this many suggestions (use 0 for no limit)</td>
	</tr>
	<tr>
		<td>{Boolean}</td>
		<td>saveToInput</td>
		<td>true</td>
		<td>If true, save back to original input each time a tag is added or removed</td>
	</tr>
	<tr>
		<td>{Boolean}</td>
		<td>addHiddenInputs</td>
		<td>true</td>
		<td>If true, also add a hidden input for each tag (fieldname_tag[]) for easier server-side processing (See options.hiddenName to create a custom name)</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>hiddenName</td>
		<td></td>
		<td>The name to use for hidden elements (defaults to the original input&#x27;s name plus &quot;_tags[]&quot;)</td>
	</tr>
	<tr>
		<td>{Boolean}</td>
		<td>highlightSubstring</td>
		<td>true</td>
		<td>If true, wrap first matching substring in each suggestion with &lt;strong class=&quot;sugg-match&quot;&gt;&lt;/strong&gt;</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>template</td>
		<td></td>
		<td>The html used to generate the widget. You can add more markup, change tag names, or add css classes, but all the sugg-* classes need to remain. See below for default.
	
	&lt;div class=&quot;sugg-widget&quot;&gt; &lt;!-- this.$widget --&gt;		
		&lt;ul class=&quot;sugg-box&quot;&gt; &lt;!-- this.$box --&gt;
			&lt;li class=&quot;sugg-box-item sugg-tag&quot;&gt; &lt;!-- this.$tagTemplate --&gt;
				&lt;span class=&quot;sugg-label&quot;&gt;TAG TEXT GOES HERE&lt;/span&gt;&lt;span class=&quot;sugg-remove&quot; title=&quot;Click to remove&quot;&gt;&amp;times;&lt;/span&gt;
			&lt;/li&gt;
			&lt;li class=&quot;sugg-box-item sugg-input-wrapper&quot;&gt; &lt;!-- this.$inputWrapper --&gt;
				&lt;input type=&quot;text&quot; class=&quot;sugg-input&quot; value=&quot;&quot; autocomplete=&quot;off&quot; /&gt; &lt;!-- this.$input --&gt;
			&lt;/li&gt;
		&lt;/ul&gt;
		&lt;div class=&quot;sugg-list-wrapper&quot;&gt;
			&lt;ul class=&quot;sugg-list&quot; style=&quot;display:none&quot;&gt; &lt;!-- this.$suggList --&gt;
				&lt;li class=&quot;sugg-item {record.cssClass}&quot;&gt;{record.value}&lt;/li&gt; &lt;!-- innerHTML is used as this.listItemTemplate unless options.listItemTemplate is set --&gt;
				&lt;li class=&quot;sugg-empty&quot;&gt;&lt;/li&gt; &lt;!-- this.$empty --&gt;
				&lt;li class=&quot;sugg-prompt&quot;&gt;&lt;/li&gt; &lt;!-- this.$prompt --&gt;
			&lt;/ul&gt;
		&lt;/div&gt;
	&lt;/div&gt;</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>listItemTemplate</td>
		<td></td>
		<td>Override the .sugg-item element in options.template</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>theme</td>
		<td>&quot;coolblue&quot;</td>
		<td>The css class to add to widget (e.g. &quot;sugg-theme-coolblue&quot;). The following themes come predefined in the CSS: &quot;coolblue&quot;, &quot;faceblue&quot;, &quot;graybox&quot;, &quot;grayred&quot;</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onInitialize</td>
		<td></td>
		<td>Add a Initialize event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onChange</td>
		<td></td>
		<td>Add a Change event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onDefaultSuggestions</td>
		<td></td>
		<td>Add a DefaultSuggestions event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onBeforeAdd</td>
		<td></td>
		<td>Add a BeforeAdd event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onBeforeAjax</td>
		<td></td>
		<td>Add a BeforeAjax event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onBeforeClose</td>
		<td></td>
		<td>Add a BeforeClose event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onBeforeFetch</td>
		<td></td>
		<td>Add a BeforeFetch event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onBeforeFilter</td>
		<td></td>
		<td>Add a BeforeFilter event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onBeforeFormat</td>
		<td></td>
		<td>Add a BeforeFormat event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onBeforeHandleKey</td>
		<td></td>
		<td>Add a BeforeHandleKey event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onBeforeMove</td>
		<td></td>
		<td>Add a BeforeMove event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onBeforeOpen</td>
		<td></td>
		<td>Add a BeforeOpen event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onBeforeRemove</td>
		<td></td>
		<td>Add a BeforeRemove event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onBeforeRender</td>
		<td></td>
		<td>Add a BeforeRender event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onBeforeSave</td>
		<td></td>
		<td>Add a BeforeSave event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onBeforeSubmit</td>
		<td></td>
		<td>Add a BeforeSubmit event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onBeforeSuggest</td>
		<td></td>
		<td>Add a BeforeSuggest event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onAfterAdd</td>
		<td></td>
		<td>Add a AfterAdd event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onAfterAjax</td>
		<td></td>
		<td>Add a AfterAjax event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onAfterClose</td>
		<td></td>
		<td>Add a AfterClose event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onAfterFetch</td>
		<td></td>
		<td>Add a AfterFetch event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onAfterFilter</td>
		<td></td>
		<td>Add a AfterFilter event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onAfterFormat</td>
		<td></td>
		<td>Add a AfterFormat event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onAfterHandleKey</td>
		<td></td>
		<td>Add a AfterHandleKey event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onAfterMove</td>
		<td></td>
		<td>Add a AfterMove event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onAfterOpen</td>
		<td></td>
		<td>Add a AfterOpen event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onAfterRemove</td>
		<td></td>
		<td>Add a AfterRemove event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onAfterSave</td>
		<td></td>
		<td>Add a AfterSave event</td>
	</tr>
	<tr>
		<td>{Function}</td>
		<td>onAfterSuggest</td>
		<td></td>
		<td>Add a AfterSuggest event</td>
	</tr>
	
</table>

Default value for **template** option:

```html
<div class="sugg-widget"> 
	<ul class="sugg-box"> 
		<li class="sugg-box-item sugg-tag"> 
			TAG TEXT GOES HERE&times; 
		</li> 
		<li class="sugg-box-item sugg-input-wrapper"> 
			<input type="text" class="sugg-input" value="" /> 
		</li> 
	</ul> 
	<div class="sugg-list-wrapper"> 
		<ul class="sugg-list" style="display:none"> 
			<li class="sugg-item {record.cssClass}">{record.value}</li> 
			<li class="sugg-empty"></li> 
			<li class="sugg-prompt"></li> 
		</ul> 
	</div> 
</div>
```

Also note that default options can be overwritten by altering `$.Suggester.defaultOptions`.

Events
-

Events can be passed as options to the constructor, or can be added later using jQuery event methods `.on()`, `.off()`, `.bind()` `.one()`, `.unbind()` and `.trigger()`

For example:

```javascript
// Register events in initial options
$(input).suggester({
	data: myData,
	onBeforeOpen: doStuff
});
// Register events later (OOP style)
var instance = new $.Suggester(selector, {
	data: myData
});
instance.on('BeforeOpen', doStuff);
// Register events later (jQuery style)
$(input).suggester({
	data: myData
}).suggester('on', 'BeforeOpen', doStuff);
```

How is data passed to event callbacks?

* Each event callback receives one argument: `event`
* `event` is a jQuery event object
* `event` also contains useful information related to the event. See the [Events](#events) section below for more information.
* When an event has a default action that can be prevented, `event` will have property `cancelable` set to true and `event.isCancelable()` will return true
* To prevent a default action, call `event.preventDefault()`
* To cancel the firing of other attached callbacks, call `event.stopImmediatePropagation()`
* In some case, altering information on the `event` object will change the behavior of the default action
* The callback will be fired in the scope of the Suggester instance. In other words, using `this` in the callback will refer to the Suggester instance. See the [Instance Properties](#instance-properties) and [Instance Methods](#instance-methods) sections below for more information.

The following is a description of each event.

<table>
	<tr>
		<th>Event</th>
		<th>Data available on <code>event</code></th>
		<th>Effect of `event.preventDefault()`</th>
	</tr>
	<tr>
		<td>BeforeAdd Fired before a tag is added</td>
		<td>
			{String} value The tag to be added (writeable) 
			{String} label The value of the tag to be added (writeable) 
			{jQuery} item The suggestion that was chosen, if any (writeable) 
			{Object} record The record that was chosen, if any (writeable) 
		</td>
		<td>The tag is not added</td>
	</tr>
	<tr>
		<td>AfterAdd Allows you to take action after a tag is added</td>
		<td>
			{Suggester.Tag} tag The tag object that was added. Has methods such as getElement(), getHidden(), getValue(), getLabel(), etc. 
			{jQuery} item The suggestion that was chosen, if any 
			{String} record The record that was chosen, if any 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>BeforeAjax Edit settings before ajax request is sent</td>
		<td>
			{Object} settings Settings sent to $.ajax() 
			{String} term The term for which we will search 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>AfterAjax Access the jqXHR after initiating the ajax call but before it returns</td>
		<td>
			{Object} settings Settings sent to $.ajax() 
			{String} term The term which was searched 
			{JqXHR} jqXHR The jquery XMLHttpRequest object 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>BeforeBlur Respond after user clicks or tabs out of input box</td>
		<td>
			{jQuery.Event} event The blur event 
			{String} value The current value in the input box. Changing it will change the effictive value. 
		</td>
		<td>Input box remains focused</td>
	</tr>
	<tr>
		<td>AfterBlur Respond after input box has blurred</td>
		<td>
			{jQuery.Event} event The blur event 
			{String} value The current value in the input box 
			{jQuery|undefined} newTag The new tag or undefined if the tag was not added on blur 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>Change Fired after a tag is added or removed or after value is manually set</td>
		<td>
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>BeforeClose Fired before suggestion box is hidden</td>
		<td>
		</td>
		<td>Suggestion box will stay open</td>
	</tr>
	<tr>
		<td>AfterClose Fired after suggestion box is hidden</td>
		<td>
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>DefaultSuggestions Fired when options.minChars is 0 to allow you to update how default suggestions are displayed. e.g. show the most commonly used values</td>
		<td>
			{Array} suggetions The suggestions to show by default. Defaults to the first options.maxSuggestions within this.data. Edit value to use your own suggestions. 
		</td>
		<td>No default suggestions are displayed</td>
	</tr>
	<tr>
		<td>BeforeFetch A chance to access the jqXHR before the ajax request has been sent</td>
		<td>
			{JqXHR} jqXHR the jQuery XHR object (see http://api.jquery.com/jQuery.ajax/#jqXHR) 
			{String} term the term that is being searched for 
		</td>
		<td>XHR is aborted</td>
	</tr>
	<tr>
		<td>AfterFetch </td>
		<td>
			{JqXHR} jqXHR The jQuery XHR object (see http://api.jquery.com/jQuery.ajax/#jqXHR) 
			{Object[]} records The Array of record objects returned from the XHR 
			{String} term The term that was search for 
		</td>
		<td>Nothing is done with results (i.e. suggestion box is not built and displayed)</td>
	</tr>
	<tr>
		<td>BeforeFilter Called before the search for results</td>
		<td>
			{String} text The text to search for 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>AfterFilter Called after the search for results</td>
		<td>
			{String} text The that was searched for 
			{Array} results The array of records that matched (writeable) 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>AfterFocus Respond after input box has focused</td>
		<td>
			{jQuery.Event} event The focus event 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>BeforeFormat Call to dynamically inject your own formatting on each suggestion</td>
		<td>
			{Object} record The record object that is being suggested 
			{String} substr The part of the string that matches the suggestion search fields 
			{String} html If you set event.html, it will be used instead of constructing the HTML 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>AfterFormat Alter the HTML that has been constructed before it is put into the DOM</td>
		<td>
			{Object} record The record object that is being suggested 
			{String} substr The part of the string that matches the suggestion search fields 
			{String} html Change the HTML before it is put into the dom 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>BeforeHandleKey Access the keydown event before Suggester processes it</td>
		<td>
			{Event} keydown The keydown event (a raw browser event, not jQuery.Event) 
		</td>
		<td>Key is not handled by Suggester. You may want to call event.keydown.preventDefault();</td>
	</tr>
	<tr>
		<td>AfterHandleKey Access the keydown event after Suggester processes it</td>
		<td>
			{Event} keydown The keydown event (a raw browser event, not jQuery.Event) 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>Initialize Do something after the widget is completely rendered and initialized. Note that it fires during instantiation, so an onInitialize property must be set in the constructor.</td>
		<td>
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>BeforeMove Fire in response to up or down arrow while suggestion list is focused</td>
		<td>
			{String} direction &quot;up&quot; or &quot;down&quot; 
			{jQuery|null} current jQuery object with the currently selected item or null if there isn&#x27;t one (writeable) 
			{jQuery|null} next jQuery object with the item that will be selected next (writeable) 
		</td>
		<td>Movement is cancelled</td>
	</tr>
	<tr>
		<td>AfterMove Fired after selected suggestion is changed in response to up or down arrow</td>
		<td>
			{String} direction &quot;up&quot; or &quot;down&quot; 
			{jQuery|null} last The previously selected item 
			{jQuery} current The newly selected item 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>BeforeOpen Fires before suggestion box is displayed</td>
		<td>
		</td>
		<td>Box is not displayed</td>
	</tr>
	<tr>
		<td>AfterOpen Fires after suggestion box is displayed</td>
		<td>
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>BeforePaste Respond before values are pasted</td>
		<td>
			{jQuery.Event} event The paste event 
			{String} value The raw value that was pasted 
			{Array} tags The array of tags to be added (if the value was successfully split on tab, semicolon, or comma). If changed, the added tags will change. 
		</td>
		<td>tags are not added and paste is cancelled</td>
	</tr>
	<tr>
		<td>AfterPaste Respond after values are pasted</td>
		<td>
			{jQuery.Event} event The paste event 
			{String} value The raw value that was pasted 
			{Array} tags The array of tags that were added (if the value was successfully split on tab, semicolon, or comma) 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>BeforeRemove Fired before a tag is removed</td>
		<td>
			{jQuery} tag The tag to be removed 
			{String} value The value of the tag to be removed (writeable) 
			{String} label The label of the tag to be removed 
		</td>
		<td>The tag will not be removed</td>
	</tr>
	<tr>
		<td>AfterRemove Fired after a tag is removed</td>
		<td>
			{jQuery} tag The tag element that was removed 
			{String} value The value of the tag that was removed 
			{String} label The label of the tag that was removed 
			{Suggester.Tag} The tag object that was removed 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>BeforeRender Modify this.$widget or any of its child elements before it is manipulated or appended. Can be used to modify this.options.template with DOM methods. Note that it fires during instantiation, so an onBeforeRender property must be set in the constructor.</td>
		<td>
			{jQuery} widget A reference to this.$widget 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>AfterRender Do something after the widget is completely rendered. Note that it fires during instantiation, so an onAfterRender property must be set in the constructor.</td>
		<td>
			{jQuery} widget A reference to this.$widget 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>BeforeSave Inject functionality before saving</td>
		<td>
			{String} newValue The value that will be written to the original input (writeable) 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>AfterSave Do something after saving value to original input</td>
		<td>
			{String} oldValue The value before saving 
			{String} newValue The value that was written to the original input 
		</td>
		<td>-</td>
	</tr>
	<tr>
		<td>BeforeSubmit Respond before form is submitted and before Suggester adds on submit</td>
		<td>
			{jQuery.Event} The jQuery-wrapped browser event 
			{HTMLFormElement} form The input&#x27;s form (same as this.$form) 
		</td>
		<td>Form will not be submitted</td>
	</tr>
	<tr>
		<td>BeforeSuggest Modify suggestion box behavior before it opens</td>
		<td>
			{String} text The text that was searched for 
		</td>
		<td>The suggestion list is built but not displayed</td>
	</tr>
	<tr>
		<td>AfterSuggest Fires after displaying suggestions</td>
		<td>
		</td>
		<td>-</td>
	</tr>
	
</table>
			
Instance Properties
-

<table>
	<tr>
		<th>Type</th>
		<th>Name</th>
		<th>Description</th>
	<tr>
	<tr>
		<td>{jQuery}</td>
		<td>$originalInput</td>
		<td>The input used to make the widget</td>
	</tr>
	<tr>
		<td>{Object[]}</td>
		<td>data</td>
		<td>Array of static data used instead of an ajax call</td>
	</tr>
	<tr>
		<td>{Suggester.Tag[]}</td>
		<td>tags</td>
		<td>An array of Suggester.Tag objects</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>hiddenName</td>
		<td>The name to use for hidden elements (defaults to the original input&#x27;s name plus &quot;_tags[]&quot;)</td>
	</tr>
	<tr>
		<td>{jQuery}</td>
		<td>$focusedTag</td>
		<td>The tag that is selected for deletion</td>
	</tr>
	<tr>
		<td>{jQuery}</td>
		<td>$currentItem</td>
		<td>The item currently selected in the suggestion box</td>
	</tr>
	<tr>
		<td>{jQuery}</td>
		<td>pubsub</td>
		<td>The publish and subscribe handle - equal to $(this)</td>
	</tr>
	<tr>
		<td>{jQuery}</td>
		<td>$widget</td>
		<td>The element that wraps the widget</td>
	</tr>
	<tr>
		<td>{jQuery}</td>
		<td>$box</td>
		<td>The container that holds the chosen tags</td>
	</tr>
	<tr>
		<td>{jQuery}</td>
		<td>$tagTemplate</td>
		<td>The tag element that is cloned to make new tags</td>
	</tr>
	<tr>
		<td>{jQuery}</td>
		<td>$input</td>
		<td>The input that users type in</td>
	</tr>
	<tr>
		<td>{jQuery}</td>
		<td>$inputWrapper</td>
		<td>The container for the input</td>
	</tr>
	<tr>
		<td>{jQuery}</td>
		<td>$suggList</td>
		<td>The suggestion list element</td>
	</tr>
	<tr>
		<td>{jQuery}</td>
		<td>$suggListWrapper</td>
		<td>The element that is positioned relatively to hold the absolutely positioned suggestion list</td>
	</tr>
	<tr>
		<td>{jQuery}</td>
		<td>$empty</td>
		<td>The element enclosing the empty text</td>
	</tr>
	<tr>
		<td>{jQuery}</td>
		<td>$prompt</td>
		<td>The element enclosing the prompt</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>listItemTemplate</td>
		<td>The html to use for suggestion list items</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>_searchTerm</td>
		<td>The search term we are currently searching for</td>
	</tr>
	<tr>
		<td>{String}</td>
		<td>_text</td>
		<td>The text in the input box that will be used to fetch results (i.e. what the user just typed)</td>
	</tr>
	<tr>
		<td>{JqXHR}</td>
		<td>_jqXHR</td>
		<td>The jQuery XHR object used initilized for fetching data - http://api.jquery.com/jQuery.ajax/#jqXHR</td>
	</tr>
	
</table>
			
Static Properties
-

<table>
	<tr>
		<th>Type</th>
		<th>Name</th>
		<th>Description</th>
	<tr>
	<tr>
		<td>{Object}</td>
		<td>defaultOptions</td>
		<td>Default options. Change these to globally change the default options
See constructor for documentation on each option</td>
	</tr>
	<tr>
		<td>{Array}</td>
		<td>instances</td>
		<td>A collection of all the instances</td>
	</tr>
	
</table>

Instance Methods
-

Instance methods may be called using an Object Oriented style or with the classic jQuery style:

```javascript
// Object Oriented Style
var suggester = new $.Suggester(input, options);
suggester.methodName(arg1, arg2, argN);

// jQuery Style
$(input).suggester(options);
$(input).suggester('methodName', arg1, arg2, argN);

// jQuery Style followed by Object Oriented Style
$(input).suggester(options);
var instance = $(input).suggester('getInstance');
instance.methodName(arg1, arg2, argN);
```

<table>

<tr>
	<td>
		destroy([options]) 
		Completely remove Suggester widget and unhide the original input box (with values populated) 
		@param {Object} [options] 
		@return {jQuery} The original input
	</td>
</tr>

<tr>
	<td>
		add(value[, label=value][, $item]) 
		Add a tag by a record or value 
		@param {String} value the tag to add@param {String} [label=value] the text to display in the new tag@param {jQuery} [$item] Set internally when the record is added by choosing from the suggestion box 
		@return {jQuery} The jQuery object containing the newly created label or undefined if one was not created
	</td>
</tr>

<tr>
	<td>
		pushTag(value, label) 
		Add a tag directly without triggering BeforeAdd or AfterAdd 
		@param {String|Number} value The value of the tag@param {String} label The text to display on the tag 
		@return {Suggester.Tag} The new tag object
	</td>
</tr>

<tr>
	<td>
		addCurrentBuffer() 
		Add a tag with the contents of the input; e.g. when the user has typed something but clicks on another part of the form
Note: this happens on blur when this.options.addOnBlur is true
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		moveSelection([direction=up]) 
		Move the selection up or down in the suggestion box 
		@param {String} [direction=up] Either &quot;up&quot; or &quot;down&quot; 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		selectItem($tag) 
		Select a suggestion 
		@param {jQuery} $tag 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		deselectItem($tag) 
		Deselect a suggestion 
		@param {jQuery} $tag 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		deselectAllItems() 
		Deselect all suggestions
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		suggest(text) 
		Open suggestion list for the given text 
		@param {String} text 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		addData(data) 
		Add more data records to the autosuggest list. Does not apply when dataUrl is set 
		@param {Object[]} data More records in the same object format as initially set 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		setData(data) 
		Set data records to the autosuggest list. Does not apply when dataUrl is set 
		@param {Object[]} data 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		getData() 
		Get all the records in the autosuggest list. Does not apply when dataUrl is set
		 
		@return {Object[]} 
	</td>
</tr>

<tr>
	<td>
		setFlyDirection(direction) 
		Set the direction of the suggestion menu, to fly upwards or downwards 
		@param {String} direction either &quot;up&quot; or &quot;down&quot; 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		focusTag($tag) 
		Focus on a previously added tag 
		@param {jQuery} $tag The .sugg-tag element to focus 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		unfocusTag() 
		Unfocus the previously focussed tag
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		removeFocusedTag(evt) 
		Remove the focused tag 
		@param {jQuery.Event} evt (optional) Used to check if $document keypress is backspace or delete 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		remove($tag) 
		Remove a tag given its text or jQuery element or HTML element 
		@param {String|jQuery|HTMLElement} $tag the tag to remove 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		findRecord(text) 
		Find a suggestion record by text. Only applies when this.options.data is set. 
		@param {String} text The text to search for 
		@return {Object|false} The matched record object or false if nothing matched.
	</td>
</tr>

<tr>
	<td>
		searchData(value, props) 
		Search through this.data to find a record with a value or label equal to the given value 
		@param {String} value The value or label to find@param {Array} props An array of strings of property names to search 
		@return {Object|Boolean} Returns the record if found, false if not found
	</td>
</tr>

<tr>
	<td>
		suggestIfNeeded() 
		Initiate suggestion process if the input text is &gt;= this.options.minChars, otherwise show prompt
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		showPrompt() 
		Show the prompt text to give a hint to users. Only called when there are no items and this.options.prompt is truthy
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		showEmptyText() 
		Show text indicating there are no suggestions - defined in this.options.emptyText
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		fetchResults(text) 
		Fetch suggestions from an ajax URL 
		@param {String} text The text to search for 
		@return {JqXHR} The jQuery XHR transport that is fetching the data
	</td>
</tr>

<tr>
	<td>
		abortFetch() 
		Cancel the XHR. Used when user starts typing again before XHR completes
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		handleSuggestions(records) 
		Take the given records and build and display suggestion box. Usually only called internally. 
		@param {Array} records The result records to use to build the suggestion list 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		isSuggestBoxOpen() 
		Return true if suggestion box is open
		 
		@return {Boolean} 
	</td>
</tr>

<tr>
	<td>
		openSuggestBox() 
		Manually open the suggestion box in whatever state it is. Usually only called internally.
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		closeSuggestBox() 
		Hide the suggestion box
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		focus() 
		Focus cursor on text input box
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		blur() 
		Unfocus the cursor from the text input box
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		getResults(text) 
		Get suggestion result records given some text (local data) 
		@param {String} text Gather suggestions based on this text 
		@return {Array} Array of Objects of matching records
	</td>
</tr>

<tr>
	<td>
		clear() 
		Clear all the chosen tags
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		getTags() 
		Get a collection of all the chosen tag objects (a shallow copy of this.tags)
		 
		@return {Array} 
	</td>
</tr>

<tr>
	<td>
		eachTag(iterator) 
		Iterate through each of the chosen tag objects 
		@param {Function} iterator The iterator function - function(i, tag) {} 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		serialize() 
		Return a URL query string representing the hidden values of the input
		 
		@return {String} 
	</td>
</tr>

<tr>
	<td>
		getValues() 
		Pluck all the tag values from the chosen tags
		 
		@return {Array} 
	</td>
</tr>

<tr>
	<td>
		getValue() 
		Get the current value as a comma-delimited string
		 
		@return {String} 
	</td>
</tr>

<tr>
	<td>
		_handleEmptyValue() 
		Helper function for setValue()
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		setTheme(themeName) 
		Set the widget&#x27;s CSS theme - Adds a class &quot;sugg-theme-%name%&quot; to the widget 
		@param {String} themeName The name of the theme to use 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		showPlaceholder([text=this.options.placeholder]) 
		Replace the contents of this.$input with the placeholder value. Automatically fires when this.options.placeholder is set
And there are no tags and we are blurring or initially rendering 
		@param {String} [text=this.options.placeholder] The text to set for the placeholder (defaults to this.options.placeholder) 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		hidePlaceholder() 
		Replace placeholder string with empty text
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		publish(type[, data]) 
		Publish the given event name and send the given data 
		@param {String} type The name of the event to publish@param {Object} [data] Additional data to attach to the event object 
		@return {jQuery.Event} The event object which behaves much like a DOM event object
	</td>
</tr>

<tr>
	<td>
		getInstance() 
		Get this instance. Useful for jQuery-style usage: var instance = $(&#x27;input&#x27;).suggester(options).suggester(&#x27;getInstance&#x27;)
		 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		_processOptions(options) 
		Set options and interpret options 
		@param {Object} options Settings passed to constructor 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_render() 
		Render the widget and get handles to key elements
		 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_handleStartValue() 
		Look at the initial element&#x27;s start value and populate tags as appropriate
		 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_setupListeners() 
		Attach event handlers
		 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_onInputFocus(evt) 
		Event handler for when this.$input is focused 
		@param {jQuery.Event} evt The focus event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_onInputBlur(evt) 
		Event handler for when this.$input is blurred 
		@param {jQuery.Event} evt blur event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_onTagRemoveClick(evt) 
		Event handler for when .sugg-remove is clicked 
		@param {jQuery.Event} evt The click event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_onTagClick(evt) 
		Event handler for when .sugg-tag is clicked 
		@param {jQuery.Event} evt The click event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_onListMouseover(evt) 
		Event handler for when autosuggest list is moused over 
		@param {jQuery.Event} evt The mouseover event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_onListClick(evt) 
		Event handler for when autosuggest list is clicked 
		@param {jQuery.Event} evt The click event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_onBoxClick(evt) 
		Event handler for when this.$box is clicked 
		@param {jQuery.Event} evt The click event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_onKeydown(evt) 
		Handle keypresses while in tag input field 
		@param {Event} evt The keydown event (a raw browser event, not jQuery.Event) 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_onCutDelete(evt) 
		Handle cut and delete on this.$input 
		@param {jQuery.Event} evt The cut, paste, or delete event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_onPaste(evt) 
		Handle paste on this.$input. Look for places to split pasted value
For example pasting &quot;a, b, c&quot; will immediately add 3 tags (when this.options.addOnComma is true)
It attempts to split on tab, then if there are no tabs then semicolons, then if there are no semicolons, commas 
		@param {jQuery.Event} evt the paste event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_key_UP(evt) 
		Handle UP key on this.$input 
		@param {Event} evt The keydown event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_key_DOWN(evt) 
		Handle DOWN key on this.$input 
		@param {Event} evt The keydown event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_key_BACKSPACE(evt) 
		Handle BACKSPACE key on this.$input 
		@param {Event} evt The keydown event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_key_TAB_COMMA(evt) 
		Handle TAB and COMMA and SEMICOLON key on this.$input 
		@param {Event} evt The keydown event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_key_ESC(evt) 
		Handle ESC key on this.$input 
		@param {Event} evt The keydown event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_key_ENTER(evt) 
		Handle ENTER key on this.$input 
		@param {Event} evt The keydown event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_key_other(evt) 
		Handle other keys (e.g. printable characters) on this.$input 
		@param {Event} evt The keydown event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_onSubmit(jqEvent) 
		Handler for form submission 
		@param {jQuery} jqEvent The submit event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_beforeFetch(jqXHR) 
		The handler function that is passed to $.ajax({beforeSend:...}) to alter XHR if needed 
		@param {JqXHR} jqXHR The jQuery XHR object (see http://api.jquery.com/jQuery.ajax/#jqXHR) 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_afterFetch(records) 
		Handler passed to $.ajax().done(function(){...}) that handles suggestion data that is returned 
		@param {Array} records The Array of record objects returned from the XHR 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_closeOnOutsideClick(evt) 
		Callback used to close the suggestion box when the user clicks off of it 
		@param {jQuery.Event} evt The click event 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_formatSuggestion(record, substr) 
		Format a suggestion before display 
		@param {Object} record The record that was suggested@param {String} substr The string that generated the list of suggestions 
		@return {String} HTML to use as the item (e.g. &#x27;&lt;li class=&quot;sugg-item&quot;&gt;Suggestion&lt;/li&gt;&#x27;)
	</td>
</tr>

<tr>
	<td>
		_updateInputSize() 
		Update the size when this.options.inputSize is &quot;auto&quot;
		 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		save() 
		Set the value of the original input to a comma-delimited set of labels
		 
		@return {String} The new value
	</td>
</tr>

<tr>
	<td>
		_spliceTag(value) 
		Given tag text, remove a tag from the internal collection and from the DOM 
		@param {String} value The text of the tag 
		@return {Object|undefined} The record associated with that tag or undefined if not found
	</td>
</tr>

<tr>
	<td>
		_spliceTagByIdx(idx) 
		Given an array index, remove a tag from the internal collection and from the DOM 
		@param {Number} idx The index position in the internal collection 
		@return {Suggester.Tag} The Suggester.Tag object that was removed
	</td>
</tr>

<tr>
	<td>
		getTagIndex(value) 
		Find a tag given value 
		@param {String} value The text of the tag 
		@return {Number} The index position of the tag in the internal collection or -1 if not found
	</td>
</tr>

<tr>
	<td>
		_setupPubsub() 
		Setup publish/subscribe system that uses jQuery&#x27;s event system. Allows subscribing this way: instance.on(&#x27;AfterFilter&#x27;, myhandler)
		 
		@return {undefined}
	</td>
</tr>

<tr>
	<td>
		_isCursorAtStart() 
		Given an input element, get the cursor position. Used to determine if backspace key should delete the previous tag
		 
		@return {Boolean} true if the cursor is at the start and no text is selected
	</td>
</tr>

<tr>
	<td>
		setValue(valueOrValues) 
		Set the tags using an array or a comma-delimited string.
Commas inside the tag name may be escaped with a backslash. 
		@param {String|Array} valueOrValues To clear value, set to empty string, false, null or undefined 
		@return {Suggester} 
	</td>
</tr>

</table>

Static Methods
-

<table>

<tr>
	<td>
		addData(data) 
		Add data to all instances 
		@param {Object[]} data Add more data to all the registered instances 
		@return {Suggester} 
	</td>
</tr>

<tr>
	<td>
		subclass(jQueryMethodName[, properties]) 
		Create a subclass of Suggester 
		@param {String} jQueryMethodName The method name to add to jQuery.fn@param {Object} [properties] Additional properties and methods to add to subclass 
		@return {Function} The new class object
	</td>
</tr>

</table>

More examples
-

Use an array of strings for suggestions:

```javascript
$('.my-text-input').suggester({
    data: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
    prompt: 'Enter a day of the week'
});
```

Use ajax to get suggestions:

```javascript
$('.my-text-input').suggester({
    dataUrl: 'http://example.com/myjson?query=%s',
    prompt: 'Enter a time zone'
});
```

Use the OOP pattern and use an array of objects for `data`:

```javascript
var suggester = new $.Suggester('.my-text-input', {
	data: [{"label":"John Doe","value":"John Doe <John.Doe@example.com>"}/*,...*/],
 onAfterSave: function(event) {
 saveToServer(event.newValue);
 }
});
suggester.on('AfterClose', doStuff);
suggester.focus();
```

See the source on the [live demos](http://sandbox.kendsnyder.com/jQuery-Suggester/demos/) for lots more examples.

Changelog
-

**Version 1.4.0, Aug 2014**
* new event DefaultSuggestions
* cite some jsPerf results
* change 'bind' to 'on' in examples and internal usage
* change default keyDelay to 200ms
* fix docs for static properties and methods

**Version 1.3.1, Apr 2014**
* Fix to hidePlaceholder()
* Fix input hidden name

**Version 1.3.0, Mar 2014**
* Fixes to setValue(), clear(), focus(), blur()
* Use `git watch`
* Documentation improvements
* More unit tests

**Version 1.2.2, Jul 2013**
* Fixes to add()
* Documentation improvements
* More unit tests

**Version 1.2.1, Jul 2013**
* Added onChange event
* Documentation fixes
* Tweaks on build process

**Version 1.2.0, Jun 2013**
* Allow pasting delimited values
* Speed improvements
* Search through this.data to find typed values when applicable

**Version 1.1.1, May 2013**
* Fixed Suggester#getValues()

**Version 1.1.0, May 2013**
* Grunt build process
* Suggester.tags is now a collection of $.Suggester.Tag objects

**Version 1.0.2, April 2013**
* CSS classes for sugg-active and sugg-placeholder-on
* Fix BeforeAdd event to let value to be altered and AfterAdd event to include record
* Documentation fixes

**Version 1.0pre, December 2012**
* initial version

Contributing
-

After using git to clone the repo, you'll need nodejs, npm, and grunt-cli installed. See [gruntjs.com](http://gruntjs.com/getting-started) for more information. Then inside the cloned directory run `npm install` and then `grunt`

Make updates only to the files in the `./src` directory. Then run `grunt` to automatically generate documentation and other files. You may also make changes to the demos by editing `./demos/*` files or improve the build process by editing `./Gruntfile.js`. Then make a pull request.

Reporting Bugs
-

To report bugs, add an issue to the [GitHub issue tracker](https://github.com/kensnyder/jQuery-Suggester/issues).

License
-

[MIT License](http://www.opensource.org/licenses/mit-license.php)

Inspired by the AutoSuggest plugin by Drew Wilson

jQuery-Suggester

jQuery-Suggester Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

jQuery-Suggester

jQuery-Suggester Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README