https://github.com/betaweb/inputtags-jquery-plugin
https://github.com/betaweb/inputtags-jquery-plugin
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/betaweb/inputtags-jquery-plugin
- Owner: betaWeb
- Created: 2015-07-24T08:42:44.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2022-02-23T16:15:45.000Z (almost 4 years ago)
- Last Synced: 2025-03-24T17:02:16.582Z (11 months ago)
- Language: JavaScript
- Homepage: http://betaweb.github.io/inputTags-jQuery-plugin/
- Size: 691 KB
- Stars: 42
- Watchers: 2
- Forks: 19
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# inputTags.js
## Presentation
[inputTags.js](http://betaweb.github.io/inputTags-jQuery-plugin/) is a simple jQuery plugin allowing to add, edit or remove tags in a tags list.
## Installation
Make sure you include the script after the jQuery library.
```html
```
## Getting started
Setting up [inputTags.js](http://betaweb.github.io/inputTags-jQuery-plugin/) is very easy. You just have to add this few lines below and that's it !
**HTML**:
```html
```
**JS**:
```js
$('#tags').inputTags();
```
## Basic usage
**Initialize plugin with custom tags**
Allows you to add custom tags on plugin initialization.
```js
$('#tags').inputTags({
tags: ['jQuery', 'tags', 'plugin'] // Custom tags list
});
```
## Advanced usage
**Initialize plugin with tags autocomplete**
Allows you to add a custom list from which the user can choose one or more tags.
```js
$('#tags').inputTags({
autocomplete: {
values: ['Pellentesque', 'habitant', 'morbi', 'tristique', 'senectus'] // autocomplete list
}
});
```
### Methods
**Coming soon...**
### Events
**Add events listener on plugin initialization**
```js
$('#tags').inputTags({
init: function($elem) {
console.log('Event called on plugin init', $elem);
},
create: function() {
console.log('Event called when an item is created');
},
update: function() {
console.log('Event called when an item is updated');
},
destroy: function() {
console.log('Event called when an item is deleted');
},
selected: function() {
console.log('Event called when an item is selected');
},
unselected: function() {
console.log('Event called when an item is unselected');
},
change: function($elem) {
console.log('Event called on item change', $elem);
}
});
```
**Add events after plugin initialization**
```js
$('#tags').inputTags().on('change', function($elem) {
console.log('Event called on item change', $elem);
});
```
same as:
```js
$('#tags').inputTags('event', 'change', function($elem) {
console.log('Event called on item change', $elem);
});
```