jQuery.tagInput

by Roberto Bicchierai

A free delicious javascript tagging input field

About the component

This component is inspired by delicious's tagging system.
It is described on detail here on my blog.

Some features:

• supports already used tag list, eventually filled with an Ajax call
• results filtering using user inputs
• supporting suggested tags, with “smart” selection
• supporting multiple separators
• supporting frequency
• css based

Try it

In this example there are some "community suggested tags" in the gray box, and a list of you tags in the drop-down.
I this example your tags are: jquery, js, pojo, agile, blog, canvas, dialog, excel, engine, flex, firefox, javascript, graph, grid, hibernate, ical, html etc.. with various frequencies.
In order to test "smart selection" try to type one of suggested tags.

Usage

tags: <input type="text" size="80" id="tag" >
  
<!--suggested tags:<span id="suggested" class="tabInputSuggestedTagList"></span>-->
<script type="text/javascript" src="jquery.tagInput.js"></script>
<link rel=stylesheet href="jquery.tagInput.css" type="text/css">

<script type="text/javascript">
  var tags=[
        {tag:"js",freq:30},{tag:"jquery",freq:25}, {tag:"pojo",freq:10},
        {tag:"blog",freq:3},{tag:"canvas",freq:8}, {tag:"dialog",freq:3},
        {tag:"engine",freq:5},{tag:"flex",freq:18}, {tag:"firefox",freq:23},
        {tag:"graph",freq:15},{tag:"grid",freq:20}, {tag:"hibernate",freq:13},
        {tag:"CSRF",freq:19},{tag:"html",freq:22}, {tag:"xml",freq:13}
      ]

  $(function(){
    $("#tag").tagInput({
      tags:tags,
      //jsonUrl:"tags.jsp",
      sortBy:"frequency",
      suggestedTags:["jquery","tagging","tag","delicious","javascript"],
      tagSeparator:" ",
      autoFilter:false,
      autoStart:false,
      //suggestedTagsPlaceHolder:$("#suggested"),
      boldify:true

    })
  })

</script>

Sources

Download sources and examples here.

This component is released under MIT license. Enjoy it!. For feedback or question use my blog: http://roberto.open-lab.com.
See also jquery plugin page and vote me!.