jQuery Tagging Widget with Auto Tag Suggesting - Tagger Widget

Tagger Widget is a plugin for jQuery and jQuery UI that turns an html select list into an user-friendly tagging widget which supports for auto tag suggestion and multi-select with options. Released under the BSD 3-Clause license.

Basic Usage:

1. Include jQuery javascript library and jQuery UI on your web page

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

2. Include jQuery Tagger Widget Plugin on your web page

<link rel="stylesheet" type="text/css" href="tagger.css" />
<script src="tagger.js"></script>

3. The html

<select name="sel1" id="sel1" size="11" multiple="" onchange="javascript:alert('onchange-fired');">
<option value="item0" selected="selected">Jonah Eldredge</item>
<option value="item1" selected="selected">Ray Duran</item>
<option value="item2">Gavin Kovach</item>
<option value="item3">Lawrence Nesmith</item>
<option value="item4">Sebastian Seneca</item>
<option value="item5">Marshall Klemme</item>
<option value="item6">Grace Vashon</item>
<option value="item7">Magaret Farwell</item>
<option value="item8" selected="selected">Lenora Desrosier</item>
<option value="item9">Tammi Severt</item>
<option value="item10">Sandra Talbert</item>
<option value="item11" selected="selected">NOT_EXISTING</item>
</select>
<div class="tagger tagger-loading"></div>

4. peopleData comes from the data.json file included for this demo.

<script src="data.json"></script>

5. The javascript

$(function(){
  $('#sel1').tagger({
    availableTags: peopleData, 
    preselectedTags: ["item0", "item1", "item8", "item11"], 
    baseURL: '..', 
    displayHierarchy: false, 
    indentMultiplier: 2
  });
});

6. All default options.

// Array of JSON tag objects
availableTags       : null,

// URL to autocomplete webservice for updating available tags
ajaxURL             : null,

// Array of tag ID's that are selected in the element (helps performance)
preselectedTags     : null,

// How many characters must be typed before searching
characterThreshold  : 1,

// How many characters can be entered into the input box
characterLimit      : null,

// How many milliseconds to wait after the last keypress before filtering
typingTimeThreshold : 200,

// Case sensitive searching
caseSensitive       : false,

// Placeholder text for input area
placeholder         : null,

// Base URL used for images
baseURL             : '/img/',

// URL for down arrow image
imgDownArrow        : 'dropdown.png',

// URL for remove image
imgRemove           : 'remove.png',

// URL for search image
imgSearch           : 'search.png',

// Sort the suggestion lists by tag.sort
sortedOutput        : false,

// Indent suggestions to show hierarchy
displayHierarchy    : false,

// When indenting suggestions, how much to multiple tag.level by
indentMultiplier    : 1,

// Then creating items it can tab to, what the tabindex should initially be
tabindexOffset      : null,

// Text to show when no suggestions can be found
noSuggestText       : 'No suggestions found',

// Text to show when no suggestions in the list
emptyListText       : 'All items selected already',


limitedText         : 'There are too many results to show, type more characters to filter these results further',

// Text to show as tooltip for the ajax search icon
searchTooltipText   : 'Enter text to get suggestions',

// Function definition to use in the event of an AJAX request error, function(tagger, data)
ajaxErrorFunction   : function(self, data){self._showMessageSuggestion('AJAX Search failed', 'error');},

// Class on an sibling to the select used to fill while the js loads the tagger
loadingClass        : '.tagger-loading',

// How many extra pixels to add on to the end of an input when expanding
inputExpandExtra    : 14,

// Override width e.g. 20em
fieldWidth          : '30em',

// Override height e.g. 20em
fieldHeight         : null,

// Set a hard width for the suggestion list (overrides maxwidth) e.g. 50em
suggestWidth        : null,

// Max width of the suggestion list (so it can be wider than the field) e.g. 50em
suggestMaxWidth     : null,

// Max height of the suggestion list e.g. 20em
suggestMaxHeight    : null,

// Make it mandatory that a value is chosen - defaults to false, no effect in multiselect mode
mandatorySelection  : false,

// Clear the filter text if any was left when the field loses focus (stops users thinking typed in text will be sent)
clearFilterOnBlur   : false

Change logs:

2017-03-21

• Put hidden span in body when setting input width

2016-06-13

• Don't overwrite suggestions list if the request that's been returned isn't the last request made. Previously, an AJAX search which was slow to return would overwrite the suggestions list even if another search has been made and returned in the meantime. Now ajaxRequestCount is incremented every time a request is made. When an AJAX search returns its results, this counter is checked. If another request has been made in the meantime, the results of the slow request are discarded.

2016-05-28

• v0.8.0

2016-01-12

• Put onChange event call in setTimeout 0 to stop IE11 crashing

2015-11-21

• Show suggestions list when the field is clicked (not on focus)

v0.7.1 (2015-11-19)

• Made freeTextMessage take a %VALUE% bind instead of concatenating it to the value
• Also used jquery trim for older IE support

v0.6.2 (2015-11-17)

• Added widget focus styling

v0.4.0 (2014-06-10)

• Fix tabindex implementation.
• Added check filter input exists before calling function on it

v0.2.0 (2013-09-10)

• Added a sortedOutput opetion to sort tags in the suggestion list by tag.sort, which should be an integer

---

This awesome jQuery plugin is developed by Fivium. For more Advanced Usages, please check the demo page or visit the official website.