jquery-tagit's Introduction

jQuery Tagit

jQuery plugin for tag input fields, e.g. the ones used by Stackoverflow.

CSS markup is based on bootstrap and built with Less support.

Inspired by Tag-it!.

Features

Autocompletion
Mouse and keyboard handling
Visual integration into bootstrapped form environments

Requirements

jQuery (tested with jQuery 1.6.2 but might work with earlier versions)
bootstrap for styling.

Usage

Include requirements and plugin in the header of your website

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript" src="jquery.tagit.js"></script>
        <style type="text/css">
            @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.min.css');
            @import url('tagit.css');
        </style>
    </head>
    <!-- ... -->

Create a ul element in a bootstrap like form environment:

<form action="#">
    <fieldset>
        <div class="clearfix">
            <label>Experience in</label>
            <div class="input">
                <ul id="languages-select" class="fake-input" tabindex="1">
                    <li>Java</li>
                </ul>
            </div>
        </div>
    </fieldset>
</form>

Control the ul element using jQuery:

<script type="text/javascript">
    $(function() {
        var tags = ["Java", "Javascript", "Python", "C", 
                    "C++", "Ruby", "CSS", "HTML", "C#", 
                    "Visual Basic", "Prolog", "Smalltalk", 
                    "Scala", "Haskel", "Bash"];
    
        $("#languages-select").tagit({
            tags: tags,
            field: "language"
        });
    });
</script>