Monday, July 22, 2024
HomejQueryConsumer-friendly Tag Administration jQuery Plugin - Selectit.js

Consumer-friendly Tag Administration jQuery Plugin – Selectit.js

Selectit.js is a tiny jQuery tags enter plugin that converts a DIV factor right into a user-friendly tag editor discipline. It’s perfect for net apps requiring tag administration, corresponding to content material administration methods, boards, or social media platforms.

Customers can enter a number of tags by separating them with commas or by urgent Enter or Area. The plugin additionally supplies API strategies to handle tags programmatically. 

The way it works:

selectit makes use of a set of predefined key codes to handle consumer enter. When a consumer varieties a tag and presses Enter, Area, or a comma, the plugin parses the enter and creates hidden enter components for every tag. The tags are displayed with easy animations if enabled. Customers can take away tags by clicking a button subsequent to every tag.

  • Key Codes Dealing with: The plugin listens for particular key presses (Enter, Area, Comma) to set off the addition of recent tags.
  • Tag Parsing: Parse consumer enter into particular person tags.
  • Tag Addition: Remodel every tag right into a span factor containing the tag textual content and a hidden enter discipline.
  • Tag Elimination: Tags may be eliminated by clicking a button, which triggers a fade-out animation if enabled.

Methods to use it:

1. Embrace the jQuery library and the ‘selectit’ plugin information in your webpage:

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

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

2. Create an empty DIV factor to carry the tags enter. You may modify the width & peak as wanted.

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

3. Name the selectit perform in your DIV factor. Specify the preliminary tags and the sphere identify for the hidden enter components:

  fieldname: 'tags',
  values: [

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

  fieldname: 'tags',
  values: [
  animation: true

5. Accessible API strategies to handle tags.

// Get all tags
$('#SelectBox').selectit('values').be part of(', ')

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

// Clear all tags

This superior jQuery plugin is developed by crpietschmann. For extra Superior Usages, please examine the demo web page or go to the official web site.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments