Magically convert a simple text input into a cool tag list with this jQuery plugin.

Overview

jQuery Tags Input Plugin

Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data - your form just sees a comma-delimited list of tags!

Get it from Github

View Demo

Test it yourself using this jsFiddle Demo

Created by XOXCO

Instructions

First, add the Javascript and CSS files to your tag:

<script src="jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />

Create a real input in your form that will contain a comma-separated list of tags. You can put any default or existing tags in the value attribute, and they'll be handled properly.

<input name="tags" id="tags" value="foo,bar,baz" />

Then, simply call the tagsInput function on any field that should be treated as a list of tags.

$('#tags').tagsInput();

If you want to use jQuery.autocomplete, you can pass in a parameter with the autocomplete url.

$('#tags').tagsInput({
  autocomplete_url:'http://myserver.com/api/autocomplete'
});

If you're using the bassistance jQuery.autocomplete, which takes extra parameters, you can also send in options to the autocomplete plugin, as described here.

$('#tags').tagsInput({
  autocomplete_url:'http://myserver.com/api/autocomplete',
  autocomplete:{selectFirst:true,width:'100px',autoFill:true}
});

You can add and remove tags by calling the addTag() and removeTag() functions.

$('#tags').addTag('foo');
$('#tags').removeTag('bar');

You can import a list of tags using the importTags() function...

$('#tags').importTags('foo,bar,baz');

You can also use importTags() to reset the tag list...

$('#tags').importTags('');

And you can check if a tag exists using tagExist()...

if ($('#tags').tagExist('foo')) { ... }

If additional functionality is required when a tag is added or removed, you may specify callback functions via the onAddTag and onRemoveTag parameters. Both functions should accept a single tag as the parameter.

If you do not want to provide a way to add tags, or you would prefer to provide an alternate interface for adding tags to the box, you may pass an false into the optional 'interactive' parameter. The tags will still be rendered as per usual, and the addTag and removeTag functions will operate as expected.

If you want a function to be called every time a tag is updated/deleted, set it as the 'onChange' option.

By default, if the cursor is immediately after a tag, hitting backspace will delete that tag. If you want to override this, set the 'removeWithBackspace' option to false.

Options

$(selector).tagsInput({
   'autocomplete_url': url_to_autocomplete_api,
   'autocomplete': { option: value, option: value},
   'height':'100px',
   'width':'300px',
   'interactive':true,
   'defaultText':'add a tag',
   'onAddTag':callback_function,
   'onRemoveTag':callback_function,
   'onChange' : callback_function,
   'delimiter': [',',';'],   // Or a string with a single delimiter. Ex: ';'
   'removeWithBackspace' : true,
   'minChars' : 0,
   'maxChars' : 0, // if not provided there is no limit
   'placeholderColor' : '#666666'
});
Comments
  • Uncaught TypeError: Cannot use 'in' operator to search for '0' in ,

    Uncaught TypeError: Cannot use 'in' operator to search for '0' in ,

    Hello and Thank you for this project!

    I'm using jQuery-Tags-Input with jQuery 2.1.3 and I'm getting this error when hitting ,:

    Uncaught TypeError: Cannot use 'in' operator to search for '0' in ,

    It references this:

    //Line 367
    $.each(event.data.delimiter ,function(index, value){
        if(event.which == value.charCodeAt(0)){
            flag = true;
        }
    });
    
    opened by esbanarango 9
  • Maintaining project

    Maintaining project

    Hey XOXCO,

    I noticed that no one has committed to this project since 2013. Would there be any interest in transferring the repository over or be added as a collaborator? I would love to take care of some of the open issues and continue to add features to the plugin.

    Best!

    opened by lucknerjb 8
  • Delete

    Delete "x" not showing up?

    Can't locate why this is happening, but the little "x" and the anchor tag to manage delete of tags does not show up. Any clues as to where this is set?

    opened by edrooney 7
  • Two new options, and one bug-fix.

    Two new options, and one bug-fix.

    1. minChars
    2. maxChars Also fixed a bug (I hope so it was one) when using autocomplete, on pressing enter two tags were added: 1st : what we typed 2hnd : what autocomplete returned.
    opened by melkorm 7
  • Assign tagInput in dynamicly apened element

    Assign tagInput in dynamicly apened element

    After a jquery append if I want to assign tagInput again to newly apended fields, it seems tagInput reassigns to old hidden fields also. So it creates multiple tag input fields for previous ones. For example check this fiddle http://jsfiddle.net/aRBkV/

    What to do in this situation?

    opened by potasiyam 6
  • Autocomplete and Lost Focus (onBlur)

    Autocomplete and Lost Focus (onBlur)

    Hello,

    When I set property autocomplete_url and put some text and lose focus the tag is not added. Without property autocomplete_url works correctly.

    My code: $('#tags_3').tagsInput({ width: '99%', height: '23px', autocomplete_url: 'TagHandler.json', defaultText: 'Add one tag', minChars: 3 });

    Thanks

    Question 
    opened by fmclopes 6
  • Multiple inputs with TagsInput - remove does not work

    Multiple inputs with TagsInput - remove does not work

    Hi, we have a few which make use of tagsinput on our page. When there is a tag removed we fire a javascript function.

    It seems that if there are multiple tagsinput inputs on the page, tags are only removed from the last input. The javascript function always seems to fire, but the tag remains in all but the final input.

    Anyone else noticed this?

    opened by blastStu 6
  • how to get and set as objects?

    how to get and set as objects?

    i've the following array:

    [
        {'id':1,'name':'John'},
        {'id':2,'name':'Drew'},
        {'id':3,'name':'Alex'},
    ];
    

    i need to get the names as suggestions and store them as objects in the input field so that i can later retrieve them by id. how can i do this?

    Question 
    opened by basith374 5
  • jQuery 1.7.2

    jQuery 1.7.2

    jQuery-Tags-Input seems to break with jQuery 1.7.2 (it's fine on 1.7.1).

    Specifically, clicking to add a tag raises the following error in the console:

    Error: Syntax error, unrecognised expression: #[object Object]_addTag
    

    And clicking to remove a tag raises the following:

    Error: Syntax error, unrecognised expression: #[object Object]_tagsinput
    
    opened by article7 5
  • autocomplete example

    autocomplete example

    I can't for the life of me, figure out how to get the autocomplete to work.

    I use the example code as provided and no ajax request is fired (checked with firebug).

    Any help would be appreciated.

    Code used:

    $('#content form input.tag-interface').tagsInput({
        autocomplete_url: APP_PATH + '/tags.json',
    });
    
    opened by csrui 5
  • tags gets appended with time when using it with angular

    tags gets appended with time when using it with angular

    I am trying to use this plugin with angular but having few issues. I have created a directive to use it, but when changing the view, id on the input seems to be append with time like "tags1431552377968_tagsinput". Is there a reason for this and how can I avoid it??

    opened by khyamay 4
  • jQuery-Tags-Input being blocked by crystal ad blocker on Safari iOS

    jQuery-Tags-Input being blocked by crystal ad blocker on Safari iOS

    I observed that jQuery-Tags-Input was not working on Safari for iOS. The following error is thrown:

    TypeError: $('#phone').importTags is not a function. (In '$('#phone').importTags('')', '$('#phone').importTags' is undefined)
    

    "phone" is the field when I'm applying them.

    The code works flawlessly on Chrome and Firefox for iOS. Also, it works flawlessly on every desktop browser I've tried, including Safari (for Mac), Chrome, and Firefox. The problem was that safari for iOS with the ad block crystal is blocking the jquery.input.tags.js from loading.

    Any idea why this is happening? I contacted the team of Crystal App.

    Html:

    <div class="col-sm-12">
       <div class="input-group m-b tooltip-demo">
          <span class="input-group-btn top-align">
             <a type="button" class="btn btn-letusgo" href=""  data-toggle="tooltip" data-placement="top" title="frontend_make_call" id="phonebutton">frontend_phone</a>
          </span>
          <input type="text" class="tags form-control" id="phone" name="phone">
       </div>
    </div>
    

    JS:

    function prepareTags() {
        // Email, phone and tags
        $('#phone').importTags(''); // ======> Code fails right here, just when initializing 
        $('#phone').tagsInput(updateMultiFieldForCustomer('phone'))
    }
    
    function updateMultiFieldForCustomer(fieldName) {
        return {
            width:'100%',
            height:'auto',
            defaultText:'add ' + fieldName,
            onAddTag: function (tag) { multiFieldAddedTagAction(fieldName, tag) },
            onRemoveTag: function (tag) { multiFieldRemovedTagAction(fieldName, tag) }
        }
    }
    
    $(document).ready(function() {
        customerid = $.urlParam("id")
        customerAlias = $.urlParam("alias")
        prepareTags()
    }
    

    Message from Web Inspector:

    Content blocker prevented frame displaying https://app.thetask.ninja/customer.html?id=xxxxxxxxxxxx from loading a resource from https://app.thetask.ninja/js/plugins/tagsinput/jquery.tagsinput.min.js

    Steps to reproduce:

    • Install Crystal Ad Block on your iPad
    • Open Safari
    • Include jQuery-Tags-Input on a website
    • Load the page
    opened by DigitalLeaves 0
  • 中文输入bug,输入框宽度无法自适应

    中文输入bug,输入框宽度无法自适应

    $(data.fake_input).bind('keypress',无法监听到中文输入时自适应宽度 增加了一段change的监听 $(data.fake_input).bind('input propertychange', function(event) { if (event.data.autosize) { $(event.target).doAutosize(settings) } })

    opened by rockyxia 0
  • ReferenceError: i is not defined

    ReferenceError: i is not defined

    Please, declare the "i" variable, because it's causing error in babel-loader when using the component with webpack 4.0.

    https://github.com/xoxco/jQuery-Tags-Input/blob/ae31b175fbfd0a0476822182ef52e76c2629e9c3/src/jquery.tagsinput.js#L354

    opened by maiconschelter 0
  • Issue with 1.3.2-17

    Issue with 1.3.2-17

    Hey, guys! I have faced with an issue. When I run composer install/composer update on the first time I see that the version 1.3.2-17 was installed. We work... make test.. and after another "composer update" we saw that the version 1.3.2-17 was updated to 1.3.3. Ok. But the version 1.3.2-17 is pretty full reworked. Сomments in your code told me that this is the version 2.0 and have no compatibility with another versions in some cases. Can you fix it? Can you make another branch for 2.0 version or hide this version(due you do not support your package)? 1.3-* and 1.3.2-17 is not quite the same

    opened by 10kote 0
  • tagExist fails when tags are not trimmed

    tagExist fails when tags are not trimmed

    When checking if a tag exists there is no "normalization" of the searched tag. Although the tags are trimmed in the function addTag, the searched tag in tagExist is not trimmed. This may cause a problem when adding new tags. I had this problem until I solved it.

    opened by abdallaharioua 0
Owner
XOXCO
XOXCO was a digital product company from 2008-2018.
XOXCO
Makes typing in input fields fun with CSS3 effects

Fancy Input Makes typing & deleting in input/Textarea fields exciting & fun with CSS3 effects. View Demo Page Basic use example: <!-- ...previous page

Yair Even Or 1.9k Jan 2, 2023
A collection of some additional input types to use with FormKit

A collection of some additional input types to use with FormKit. Most of these additional input types are based on my personal needs, but feel free to submit PRs to add more.

Kurt Gierke 8 Jan 2, 2023
jQuery Form Plugin

jQuery Form Overview The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajax

null 5.2k Jan 3, 2023
jQuery plugin for styling checkboxes and radio-buttons

English description | Описание на русском jQuery-plugin for styling checkboxes and radio-buttons. With skin support. Version: 2.0.0 Project page and d

Denis Ineshin 70 Sep 24, 2022
Automatically persist your forms' text and select field values locally, until the form is submitted.

Garlic.js Garlic.js allows you to automatically persist your forms' text and select field values locally, until the form is submitted. This way, your

Guillaume Potier 2.4k Dec 21, 2022
Simple-load-more - This jQuery function will add a functionality to load 5 (or custom) more items. No AJAX functionality.

Simple Load More This jQuery plugin will add a functionality to load 5 (or custom) more items. Best for lists that are long and you want to hide all e

Zeshan Ahmed 28 Jan 4, 2023
Tag-input - A versetile tag input component built with Vue 3 Composition API

TagInput A versetile tag input component built with Vue 3 Composition API. Please read this article to learn how to build this package step by step an

Mayank 12 Oct 12, 2022
A jQuery UI plugin to handle multi-tag fields as well as tag suggestions/autocomplete.

Tag-it: a jQuery UI plugin Tag-it is a simple and configurable tag editing widget with autocomplete support. Homepage Demo Check the examples.html for

Alex Ehlke 2.5k Dec 20, 2022
Magically create forms + actions in Remix!

Welcome to Remix Forms! This repository contains the Remix Forms source code. We're just getting started and the APIs are unstable, so we appreciate y

Seasoned 321 Dec 29, 2022
Simple tag input for Bootstrap

Tagin Simple tag input for Bootstrap. Supports bootstrap v4 and v5. Demo: https://tagin.netlify.app/ Features Custom separators Enable/disable duplica

Erwin Heldy G 37 Sep 28, 2022
"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

ShuffleText This is the JavaScript library for text effect such as Flash contents. Setup Script Install <script src="shuffle-text.js"></script> NPM In

Yasunobu Ikeda 96 Dec 24, 2022
Create Persian Calendar as html helper with tag builder c# , and convert selected persian date to gregorian date

Persian-Calendar Use JS,Html,CSS,C# White theme for Persian Calendar , easy to use. Create Persian Calendar as html helper. Use Tag builder in c# for

Tareq Awwad 4 Feb 28, 2022
jquery plugin to convert number inputs into knobs that can be adjusted by dragging with mouse or fingers

jquery-knobby is a jquery plugin to convert number input elements into turnable knobs that can be adjusted by cyclic dragging with mouse or fingers -

null 4 Oct 2, 2020
Bionic ReadingTool - Convert Text into Better Way to Read Faster

?? Bionic ReadingTool A revolutionary way for guiding the eyes through text using artificial fixation spots to make reading easier. As a result, the r

Lucian Daniel Crisan 335 Dec 24, 2022
Convert any webpage into bionified text!

Bionify - Read Faster! LEGAL NOTICE: To the wonderful folks at Bionic Reading®, this is not a pirated version of your Bionic Reading® API, but rather

Vincent 96 Dec 8, 2022
A multi-tag input for sanity studio.

sanity-plugin-tags A multi-tag input for sanity studio. Fully featured with autocomplete capabilities, live updates, predefined tag options, style and

P Christopher Bowers 7 Jul 22, 2022
Obsidian plugin: Type text shortcuts that expand into javascript generated text.

Obsidian Plugin - Text Expander JS (open beta) This Obsidian plugin allows the user to type text shortcuts that are replaced by (or "expanded into") j

Jon Heard 79 Dec 27, 2022
A Bootstrap plugin to create input spinner elements for number input

bootstrap-input-spinner A Bootstrap / jQuery plugin to create input spinner elements for number input. Demo page with examples Examples with floating-

Stefan Haack 220 Nov 7, 2022
Tag cloud plugin for jQuery, showing bigger tags in the center

jquery.tagcloud v1.2.0 Tag cloud plugin for jQuery, showing bigger tags in the center. Usage There are two ways to define a tag cloud: Use ul and li H

Peter Thoeny 1 Jun 30, 2022