cris-m / TagsInput

This repository is a jQuery plugin for a tag input text.

TagsInput

This repository is a jQuery plugin for a tag input.

What is TagsInput?

TagsInput it is a simple jQuery plugin for tags input text functionalities.

Configure TagsInput.

• If you want to use the functionality provided by plugin you should a Font Awesome sylesheet and TagsInput javascript file to your html.
• Add a div as a tags contains in html and a the hidden input text which will receive the tag names when user press Tab or Spacebar.

Example

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <label>Enter some programming Language</label>
            <div class="myContainer"></div>
        </div>
        </div>
    <input type="text" class="inputTags" hidden/>
</div>

• The plugin can then be added into your javascript like so

$('.myContainer').TagsInput({
  initialTags: ['c#', 'python', 'jQuery'], // allow initialization of tags
  tagInputPlaceholder:'eg. python',
  tagHiddenInput: $('.inputTags'),
  tagContainerBorderColor: '#d3d3d3',
  tagBackgroundColor: '#295070',
  tagColor: '#9cc3db',
  tagBorderColor: '#688eac'
});

Results

Usage

To use TagsInput, the user write the text and press Tab or Spacebar to add the tag name to the hidden input text which will be sent to the server side when the user submit the form.

Contributing

This project welcomes contributions and suggestions.