Description

Status: release.

Vanilla JS tags plugun. Add input HTML element opportunities edit tags. Plugin not include functionality autocomplite. Required use third-party plugin, e.g. JavaScript-autoComplete.

Demo: https://harebrown.herokuapp.com/demo-tags-input/index.html

Requirement

Plugin is implementation element edit tags to stackoverflow.com.

Features

• Add, remove tags
• Edit any tag inline
• Separate char: whitespace, tab, comma, semicolon.

Roadmap

• Add test
• Override hook for event plugin onBeforeTagAdd/onTagAdd и onBeforeTagRemove/onTagRemove
• Auto init element on page by the sign
• Init and destroy plugin
• Option add value tags only from list

API Плагин Метки

module tags input plugin

Author: Oleg Rusak

• pTags
  • pTags ⏏
    • new pTags(options)
    • .value ⇒ string
    • .value
    • .addTag(name) ⇒ Object | null
    • .addTagsFromString(str) ⇒ Array.<Object>
    • .remove(name) ⇒ boolean
    • .returnIndexTag(name) ⇒ Number
    • .focus()

pTags ⏏

class implementation tags input plugin

Kind: Exported class

new pTags(options)

tags input plugin

Throws:

• Not support. Required support querySelector and addEventListener!

Param	Type	Description
options	object	plugin settings. options.selector - css selector search for init element. options.handlerInputWidth - width input edit tag text. default 15em

pTags.value ⇒ string

get value tags

Kind: instance property of pTags
Returns: string - - name tags through separate symbol
Access: public

pTags.value

set value tags

Kind: instance property of pTags
Access: public

Param	Type	Description
str	string	name tags through separate symbol

pTags.addTag(name) ⇒ Object | null

add new unique tag by name

Kind: instance method of pTags
Returns: Object - tag - object add new DOM element tagnull - tag - name is empty or not unique
Access: public

Param	Type	Description
name	string	name new tag

pTags.addTagsFromString(str) ⇒ Array.<Object>

add tags from string

Kind: instance method of pTags
Returns: Array.<Object> - listTag = list object add DOM elements tags plugin
Access: public

Param	Type	Description
str	string	name tags throw separate symbol

Example

// returns [{tag1}, {tag2}]
pTag.addTagsFromString("tag1 tag2 tag1");

pTags.remove(name) ⇒ boolean

remove tag by name

Kind: instance method of pTags
Returns: boolean - operation successful. False - name not exist in tag storage. True - remove all.
Access: public

Param	Type	Description
name	string	name tag

pTags.returnIndexTag(name) ⇒ Number

return index tag by name in storage

Kind: instance method of pTags
Returns: Number - index. -1 - not found. Number - index base 0.
Access: public

Param	Type	Description
name	string	name tag

pTags.focus()

focus cursor tags input element

Kind: instance method of pTags
Access: public