Small Bootstrap Tagging Plugin With Autocomplete Support - Tagsy

Tagsy is a jQuery tagging plugin for Bootstrap that enables the user to type some tags into an input field with autocomplete support.

Features:

• Based on Bootstrap styles.
• Auto generates a input field for the tagging system.
• Tags can be created by pressing the "Enter" key.
• Allows to select multiple tags from a pre-defined autosuggest dropdown list.
• Clicks on the tag to remove it.
• Allows to set the maximum number of tags to be entered.

How to use it:

1. Load the Bootstrap and Tagsy plugin's CSS files in the head section of the html document.

<link rel="stylesheet" href="bootstrap.min.css">
<link href="tagsy.css" rel="stylesheet">

2. Create a placeholder element for the tagging system.

<div id="tagsy"></div>

3. Load the jQuery Tagsy plugin's script after jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="tagsy.js"></script>

4. Initialize the tagging system as this.

$('#tagsy').tagsy();

5. Define an array of suggestions for the autocomplete:

$('#tagsy').tagsy({
  data: [{
    label: 'Item 1', value: 1
  },{
    label: 'Item 2', value: 2
  },{
    label: 'Item 3', value: 3
  }]
});

6. More configuration options.

$('#tagsy').tagsy({

  // placeholder text
  placeholder: 'Enter a tag',
  

  // name of input field
  inputName: 'tags',

  // pre-selected items
  items: [],

  // max number of tags
  max: 10,

  // allows to add custom tags
  allowFreeEntry: true
  
});

---

This awesome jQuery plugin is developed by amraei. For more Advanced Usages, please check the demo page or visit the official website.