User-friendly Tag Management jQuery Plugin - Selectit.js

Selectit.js is a tiny jQuery tags input plugin that converts a DIV element into a user-friendly tag editor field. It is ideal for web apps requiring tag management, such as content management systems, forums, or social media platforms.

Users can input multiple tags by separating them with commas or by pressing Enter or Space. The plugin also provides API methods to manage tags programmatically. 

How it works:

selectit uses a set of predefined key codes to manage user input. When a user types a tag and presses Enter, Space, or a comma, the plugin parses the input and creates hidden input elements for each tag. The tags are displayed with smooth animations if enabled. Users can remove tags by clicking a button next to each tag.

• Key Codes Handling: The plugin listens for specific key presses (Enter, Space, Comma) to trigger the addition of new tags.
• Tag Parsing: Parse user input into individual tags.
• Tag Addition: Transform each tag into a span element containing the tag text and a hidden input field.
• Tag Removal: Tags can be removed by clicking a button, which triggers a fade-out animation if enabled.

How to use it:

1. Include the jQuery library and the 'selectit' plugin files on your webpage:

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery selectit plugin -->
<link rel="stylesheet" href="/dist/css/jquery.selectit.css" />
<script src="/dist/js/jquery.selectit.js"></script>

2. Create an empty DIV element to hold the tags input. You can adjust the width & height as needed.

<div id="SelectBox" style="width: 640px"></div>

3. Call the selectit function on your DIV element. Specify the initial tags and the field name for the hidden input elements:

$('#SelectBox').selectit({
  fieldname: 'tags',
  values: [
    'jQuery',
    'Script',
    'Net'
  ]
});

4. Enable or disable the fade-in/fade-out animations.

$('#SelectBox').selectit({
  fieldname: 'tags',
  values: [
    'jQuery',
    'Script',
    'Net'
  ],
  animation: true
});

5. Available API methods to manage tags.

// Get all tags
$('#SelectBox').selectit('values').join(', ')

// Add a new tag
$('#SelectBox').selectit('add', tag);

// Clear all tags
$('#SelectBox').selectit('clear');

---

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