https://github.com/cris-m/tagsinput

This repository is a jQuery plugin for a tag input text.
https://github.com/cris-m/tagsinput

javascript jquery tagsinput

Last synced: about 22 hours ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/cris-m/tagsinput
• Owner: cris-m
• License: mit
• Created: 2020-08-08T11:59:20.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-10-23T17:13:59.000Z (over 4 years ago)
• Last Synced: 2023-09-21T15:12:16.445Z (over 1 year ago)
• Topics: javascript, jquery, tagsinput
• Language: JavaScript
• Homepage:
• Size: 23.4 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# TagsInput

This repository is a [jQuery](https://jquery.com/)  plugin for a tag input. 

![tagsinput example](https://github.com/cris-m/TagsInput/blob/master/screenshots/Screenshot2.png?raw=true)

## What is TagsInput?

**TagsInput** it is a simple [jQuery](https://jquery.com/) plugin for tags input text functionalities.

## Configure TagsInput.

* If you want to use the functionality provided by plugin you should  a [Font Awesome](https://fontawesome.com/start) sylesheet and [TagsInput](https://github.com/cris-m/TagsInput/blob/master/src/js/taginput.js) 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

```html



    


        


            Enter some programming Language

            


        

        

    



```


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

```javascript

$('.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](https://github.com/cris-m/TagsInput/blob/master/screenshots/Screenshot1.png?raw=true)

![tagsinput result 2](https://github.com/cris-m/TagsInput/blob/master/screenshots/Screenshot2.png?raw=true)

![tagsinput result 3](https://github.com/cris-m/TagsInput/blob/master/screenshots/Screenshot3.png?raw=true)

## 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.