Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elo7/tag-amd
Transform any input into a tag container
https://github.com/elo7/tag-amd
amd front-end javascript lib martell nymeros tags
Last synced: about 2 months ago
JSON representation
Transform any input into a tag container
- Host: GitHub
- URL: https://github.com/elo7/tag-amd
- Owner: elo7
- License: bsd-3-clause
- Created: 2016-09-21T18:17:28.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T20:04:07.000Z (about 2 years ago)
- Last Synced: 2024-04-30T07:23:35.273Z (8 months ago)
- Topics: amd, front-end, javascript, lib, martell, nymeros, tags
- Language: HTML
- Homepage:
- Size: 241 KB
- Stars: 1
- Watchers: 88
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tag-amd
Transform an input into a tag container.
## Dependencies
tag-amd depends on an AMD loader (we recommend [async-define](http://elo7.github.io/async-define/)) and on [doc-amd](http://elo7.github.io/doc-amd/).
## Installation
You can use either `bower` or `npm` (preferred) to install it into your project:
```
bower install tag-amd
npm install elo7-tag-amd
```
In the download package, there will be a JavaScript file (`dist/tag.min.js`) and a CSS file (`dist/tag.min.css`). The CSS file is optional; you may use it as a reference for your own styling.
## Usage
In your HTML file, import the library and its dependencies (assuming you are using *async-define*):
```html
```
**Important:** `events-amd` its a `doc-amd` [dependency](https://github.com/elo7/doc-amd/#dependencies).
Create a form control for your user to type the tags using either `` or ``:
```html
Type your tags here
```
**Important:** do **not** put the tag field inside a `` element!
Then, in your own JavaScript files, transform the input into a tag field:
```javascript
define(['tag'], function(tag) {
tag.tagify('#my-tag-field');
});
```
You may optionally specify callbacks by passing an object as second argument:
```javascript
define(['tag'], function(tag) {
tag.tagify('#my-tag-field', {
added: function(addedTags) {
console.log('Hey! Here is an array of new tags for you', addedTags);
}
});
});
```
## API
```javascript
tag.tagify(cssSelector, options)
```
where `options` is an object that may contain the following callbacks:
- `added(addedTags)`: called when one or more tags are added to the list of tags; receives an array with the new tags as argument
- `removed(removedTag)`: called when a tag is removed from the list; receives the removed tag as argument
- `errorAlreadyExists(tagInput)`: called when the user tries to add a tag that already exists in the list; receives the input as argument
- `errorCleared(tagInput)`: called when the user edits the tag field after an error; receives the input as argument
- `maxlengthExceeded()`: called when the input's maxlength is reached after adding a tag, **not** when the user is typing the tags; receives no arguments
## License
tag-amd is released under the [BSD license](https://github.com/elo7/tag-amd/blob/master/LICENSE). Have at it.
---
Copyright ©️ 2017 Elo7# tag-amd