Skip to content

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

License

Notifications You must be signed in to change notification settings

cris-m/TagsInput

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TagsInput

This repository is a jQuery plugin for a tag input.

tagsinput example

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

tagsinput result 1

tagsinput result 2

tagsinput result 3

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.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published