#tagator jquery-based

New Post has been published on http://www.htmluse.com/tagator-input-boxes-making-them-tagging-boxes/

Tagator - input boxes, making them tagging boxes

Download   Demo

This jquery plugin Tagator is a jQuery-based replacement for input boxes, making them tagging boxes. It supports searching, and affects the original input box directly, which is used as a comma serparated data container.

Browser compatibility

IE 8+

Chrome 2+

Firefox 3+

Safari 4+

Opera 10.5+

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="fm.tagator.jquery.css"/> <script src="jquery-1.11.0.min.js"></script> <script src="fm.tagator.jquery.js"></script>

2.  HTML

<input id="inputTagator" name="inputTagator" value="Test,Best,Rest">

3. JAVASCRIPT

$('#inputTagator').tagator();

if you want to change settings:

$('#inputBox').tagator( prefix: 'tagator_', // CSS class prefix height: 'auto', // auto or element useDimmer: false, // dims the screen when result list is visible showAllOptionsOnFocus: false, // shows all options even if input box is empty autocomplete: [] // this is an array of autocomplete options );

4. CSS CLASSES

Here is a list of all the css classes

Class Description tagator This is the new input box. It has some extra classes called options-visible and options-hidden which tell if the options list is visible or not. prefix_tags The holder for the tags. prefix_tag The tags. prefix_tag_remove The remove button for the tag. prefix_input This is the input box for the tagator. prefix_textlength This is used to calculate the size of the input box. prefix_options The autocomplete options list holder. This is used together with options-visible or options-hidden to show or hide the autocomplete options. prefix_option This is a autocomplete option. It has an extra class called active which tells if the option is the active one. prefix_dimmer This is the dimmer

5. DOM STRUCTURE

dimmer

tagator: containing the options-visible|options-hidden class

textlength

tags

tag

tag_remove

tag…

input

options

option: containing the active class

option…

6. JQUEYR METHODS

Method Description refresh This method is used to manually refresh the plugin. A scenario where this would be useful is if the data in the original input box is changed by some other script. autocomplete This method is used to change/update the autocomplete list destroy This method is used to remove the instance of the plugin from the input box and restore it to its original state.

Method usage

$('#inputBox').tagator('refresh');

$('#inputBox').tagator('autocomplete', ['tag1','tag2','tag3']);