https://github.com/kriskbx/tagdog.js

A simple, UI-enhancing and mobile-optimized JavaScript plugin that turns text input fields into tag fields.
https://github.com/kriskbx/tagdog.js

Last synced: about 1 month ago
JSON representation

A simple, UI-enhancing and mobile-optimized JavaScript plugin that turns text input fields into tag fields.

• Host: GitHub
• URL: https://github.com/kriskbx/tagdog.js
• Owner: kriskbx
• License: mit
• Archived: true
• Created: 2015-09-29T20:36:50.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-12-16T18:40:35.000Z (almost 9 years ago)
• Last Synced: 2024-03-16T07:50:54.419Z (8 months ago)
• Language: JavaScript
• Size: 87.9 KB
• Stars: 0
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: MIT-LICENSE.txt

Awesome Lists containing this project

README

        
# Tagdog

## Table of contents

1. [What is Tagdog?](#user-content-1-what-is-tagdog)

2. [How does Tagdog work?](#user-content-2-how-does-tagdog-work)

3. [Install Tagdog](#user-content-3-install-tagdog)

4. [Implementation and instantiation](#user-content-4-implementation-and-instantiation)

5. [Selectors and options](#user-content-5-selectors-and-options)

6. [The Tagdog API](#user-content-6-the-tagdog-api)

7. [Styling](#user-content-7-styling)

8. [Tagdog Implementations](#user-content-7-tagdog-implementations)

---

## 1. What is Tagdog?

Tagdog is a plugin written in vanilla JavaScript that turns simple form markup, like the following, into a tag input field.

```javascript



	Tags

	



```


## 2. How does Tagdog work?		

Tagdog automatically adds two elements to the element that wrapping your original input field.

1. a hidden input field that receives the `name` attribute of the original input field

2. a container element that holds tag elements, which act as an interactive presentation of the added tags.

You can write your tags into the original input field, then press the `Enter` or `,` in order to add tags to Tagdog. Click the tag elements or press `Backspace` in order to delete them. You can also use the instance API to manipulate the tag field, adding and removing tags, for example.

#### tl;dr

Here's a live example of [Tagdog in action](https://showcase.letmeco.de/tagdog/).

## 3. Install Tagdog

In order to install Tagdog, ~~`bower install tagdog` or the~~ the good old `git clone [email protected]:odiumediae/tagdog.js.git`will work nicely. I unregistered the Bower package, because I had problems with the versioning/tagging and was too lazy (and annoyed by Bower) to deal with the problem without developing a nervous eye-twitch. Drop me a line, if you really *have* to have the Bower way.

## 4. Implementation and instantiation

To create one or more instances of Tagdog you just need to import the Tagdog JavaScript into your HTML. You should put it as close as possible before any scripts or modules that make use of Tagdog, and the closing `body` tag, like this:

```javascript

	[...]

	

	

		(function() {

			"use strict";

			var tagFields = tagdog('.tagdog-field');

			console.log(tagFields);

		}).call(this);