New Post has been published on Html Use
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']);
$('#inputBox').tagator('destroy');