Tuesday, December 15, 2015

JQuery Tag plugin compatible with Twitter Typeahead, TypeTags

Hi guys, here it is a simple tag manager for JQuery that work nicely with twitter typeahead.

I tried a lot of plugin out there, but no one would work exactly as I wanted, so I had to do it by myself.

The plugin is pretty simple, with just a few of functions and 2Kb minified.

You can find an example here:





The plugin is pretty simple:

HTML MARKUP:

 <input id="tag-input" type="text" value=""/>  
 <div id="tag-list"></div>  
 <input type="hidden" id="tag-hidden" value="one tag,another tag" /> 

SCRIPT INITIALIZATION:

 $("#tag-input").typeTags({  
  containerSelector: "#tag-list",
  hiddenSelector: "#tag-hidden"  
 });  

If you want to use that with twitter typeahead (tested with twitter typeahead 0.11.1) just bind typeahead before the typeTags plugin initialization.

Every tag that is entered will be put in the specified HiddenField to be able to post the values.



PLUGIN OPTIONS

 $("#tag-input").typeTags({  
  containerSelector: "#tag-list",     // the container where the tags will be added
  hiddenSelector: "#tag-hidden",      // the hidden field where to put the tags (optional)
  delimiters: [9, 13, 44],            // delimeters key to enter tags, default to TAB, ENTER, COMMA
  deleteOnBackspace: true             // delete tag on backspace
 });  


EVENTS

There's only one event, invoked on tag add

  $("#tag-input").typeTags({options}).on('tt:added', function (e, tag_txt, tag_node, suggestion) {   
      tag_node.addClass("new class");       
     });   

The parameters that you get on this event are:

  • tag_txt (the text entered)
  • tag_node (the jquery node added, you can manipulate it here like in the sample)
  • suggestion (the twitter typeahead suggestion object, if the tag was entered clicking on a twitter typeahead node. Here you have all custom parameters that could have been sent from a remote ajax call or whatever)
PUBLIC METHODS
  • clear  (Clears all the tags)
  • pushTag (add a tag to the list)
 $('#tag-input').data('typeTags').pushTag('third tag');  



Complete example markup


 <html>  
 <head>  
 <link href="style.css" rel="stylesheet" />  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
 </head>  
 <body>  
      <input type="hidden" id="tag-hidden" value="one tag,another tag" />    
      <div id="tag-list"></div>  
      <input id="tag-input" type="text" value="" class="form-control" />  
 <script src="type-tags.js"></script>  
 <script>          
      // init typeahead here!
      // .........

      // plugin initialization
      $("#tag-input").typeTags(  
      {  
           hiddenSelector: "#tag-hidden",          
           containerSelector: "#tag-list"                 
      }).on('tt:added', function (e, tagTxt, tagNode, sugg) {  
           console.log(tagTxt);  
      });  
      // example method  
      $('#tag-input').data('typeTags').pushTag('third tag');  
 </script>  
 </body>  
 </html>  




No comments: