https://github.com/tomerdmnt/tag-input

Turns a text input into a pretty Evernote like tags input
https://github.com/tomerdmnt/tag-input

Last synced: 3 months ago
JSON representation

Turns a text input into a pretty Evernote like tags input

• Host: GitHub
• URL: https://github.com/tomerdmnt/tag-input
• Owner: tomerdmnt
• Created: 2012-10-10T04:34:38.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2016-02-01T07:50:37.000Z (about 9 years ago)
• Last Synced: 2024-08-01T22:02:13.124Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 223 KB
• Stars: 30
• Watchers: 2
• Forks: 14
• Open Issues: 1
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

• awesome-github-repos - tomerdmnt/tag-input - Turns a text input into a pretty Evernote like tags input (JavaScript)

README

        

# tag-input

  A [component](http://github.com/component/component) that turns a text input element into a pretty tags input.

  Enables you to work with any MVC framework using simple events or you can get the tags from the inner model.

  ![Tags Input](https://raw.github.com/tomerdmnt/tag-input/master/screenshot.jpg)

## Install

  ```

    component install tomerdmnt/tag-input

  ```

## Example

  ``` javascript

    var TagInput = require('tag-input');

    var taginput = TagInput(document.getElementById('tags'))

    taginput.on('add', function (tag) {

      console.log(tag + ' added')

      console.log(taginput.tags())

    })

    taginput.on('remove', function (tag) {

      console.log(tag + ' removed')

      console.log(taginput.tags())

    })

  ```

## Notes about style

  The pseudo input style is very basic, so you can adjust its looks to your site, You can extend it by adding to taginputContainer class.

## api

### TagInput(input)

  binds to a text input element

### addtag(tag)

  adds a tag to the tag input from js

### removetag(tag)

  removes a tag from the tag input from js

### event: 'add'

  Called when a tag is added

### event: 'removed'

  Called when a tag is removed`