Tagify

https://github.com/yaireo/tagify
Admin
Tagify is a lightweight, highly customizable tags input component for Vanilla JS, React, Vue, and...
Tokens:98,410
Snippets:456
Trust Score:9.8
License:MIT
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install Tagify via npm

Source: https://github.com/yaireo/tagify/blob/master/README.md

Install the Tagify package as a Node module for use in your project.

```sh
npm i @yaireo/tagify --save
```

--------------------------------

### Manually Render Suggestions List

Source: https://github.com/yaireo/tagify/blob/master/index.html

This example demonstrates how to manually control the rendering of the suggestions list, which is useful for custom implementations like modals or popups. The list is configured to always be visible.

```html
<input name='tags-manual-suggestions' placeholder='write some tags'>
    <h3>☝ Add items from below list:</h3>
```

```javascript
(function(){
    var input = document.querySelector('input[name=tags-outside]')
    var tagify = new Tagify(input, {
        whitelist: ['foo', 'bar', 'baz'],
        focusable: false,
        dropdown: {
            position: 'input',
            enabled: 0 // always opens dropdown when input gets focus
        }
    })
})()
```

--------------------------------

### Build Tagify from Source

Source: https://github.com/yaireo/tagify/blob/master/README.md

Installs dependencies and builds the Tagify project from source using pnpm. This is intended for contributors and requires Node.js 22+ and pnpm 10+.

```shell
pnpm install
pnpm run build
```

--------------------------------

### Tagify Event Listeners and Callbacks

Source: https://github.com/yaireo/tagify/blob/master/index.html

Demonstrates setting up various event listeners for Tagify, including 'add', 'remove', 'input', 'edit', 'invalid', 'click', 'focus', 'blur', and dropdown events. Includes example callback functions.

```javascript
// "remove all tags" button event listener
document.querySelector('.tags--removeAllBtn')
    .addEventListener('click', tagify.removeAllTags.bind(tagify))

// Chainable event listeners
tagify.on('add', onAddTag)
      .on('remove', onRemoveTag)
      .on('input', onInput)
      .on('edit', onTagEdit)
      .on('invalid', onInvalidTag)
      .on('click', onTagClick)
      .on('focus', onTagifyFocusBlur)
      .on('blur', onTagifyFocusBlur)
      .on('dropdown:hide dropdown:show', e => console.log(e.type))
      .on('dropdown:select', onDropdownSelect)

var mockAjax = (function mockAjax(){
    var timeout;
    return function(duration){
        clearTimeout(timeout); // abort last request
        return new Promise(function(resolve, reject){
            timeout = setTimeout(resolve, duration || 700, whitelist)
        })
    }
})()

// tag added callback
function onAddTag(e){
    console.log("onAddTag: ", e.detail);
    console.log("original input value: ", inputElm.value)
    tagify.off('add', onAddTag) // exmaple of removing a custom Tagify event
}

// tag remvoed callback
function onRemoveTag(e){
    console.log("onRemoveTag:", e.detail, "tagify instance value:", tagify.value)
}

// on character(s) added/removed (user is typing/deleting)
function onInput(e){
    console.log("onInput: ", e.detail);
    tagify.whitelist = null; // reset current whitelist
    tagify.loading(true) // show the loader animation

    // get new whitelist from a delayed mocked request (Promise)
    mockAjax()
        .then(function(result){
            tagify.settings.whitelist = result.concat(tagify.value) // add already-existing tags to the new whitelist array

            tagify
                .loading(false)
                // render the suggestions dropdown.
                .dropdown.show(e.detail.value);
        })
        .catch(err => tagify.dropdown.hide())
}

function onTagEdit(e){

```

--------------------------------

### HTML Example of Tagify Suggestions Dropdown

Source: https://github.com/yaireo/tagify/blob/master/README.md

Illustrates the rendered HTML structure for the Tagify suggestions dropdown, showing active and inactive items.

```html
<div class="tagify__dropdown tagify__dropdown--text" style="left:993.5px; top:106.375px; width:616px;">
    <div class="tagify__dropdown__wrapper">
      <div class="tagify__dropdown__item tagify__dropdown__item--active" value="aaab">aaab</div>
      <div class="tagify__dropdown__item" value="aaabb">aaabb</div>
      <div class="tagify__dropdown__item" value="aaabc">aaabc</div>
      <div class="tagify__dropdown__item" value="aaabd">aaabd</div>
      <div class="tagify__dropdown__item" value="aaabe">aaabe</div>
    </div>
</div>
```

--------------------------------

### React Integration with Tagify

Source: https://github.com/yaireo/tagify/blob/master/README.md

Integrate Tagify into a React application using the provided wrapper component. This example demonstrates setting up whitelist, placeholder, initial values, and handling tag changes.

```javascript
import { useCallback, useRef } from 'react'
import Tags from '@yaireo/tagify/react' // React-wrapper file
import '@yaireo/tagify/dist/tagify.css' // Tagify CSS

const App = () => {
    // on tag add/edit/remove
    const onChange = useCallback((e) => {
        console.log("CHANGED:"
            , e.detail.tagify.value // Array where each tag includes tagify's (needed) extra properties
            , e.detail.tagify.getCleanValue() // Same as above, without the extra properties
            , e.detail.value // a string representing the tags
        )
    }, [])

    return (
        <Tags
            whitelist={['item 1', 'another item', 'item 3']}
            placeholder='Add some tags'
            settings={{
                blacklist: ["xxx"],
                maxTags: 4,
                dropdown: {
                    enabled: 0 // always show suggestions dropdown
                }
            }}
            defaultValue="a,b,c" // initial value
            onChange={onChange}
        />
    )
}
```

--------------------------------

### Initialize Tagify with Extra Properties

Source: https://github.com/yaireo/tagify/blob/master/docs/examples/dist/extra-properties.html

Configure Tagify to use custom dropdown settings and map tag values to a specific property. This example sets up a whitelist of countries and enables a custom class for the dropdown suggestions.

```javascript
var input = document.querySelector('input[name=tags]'),
    tagify = new Tagify(input, {
      whitelist: [
        { value: 'Algeria', code: 'DZ' }, { value: 'Argentina', code: 'AR' }, { value: 'Australia', code: 'AU' }, { value: 'Austria', code: 'AT' }, { value: 'Bahamas', code: 'BS' }, { value: 'Bahrain', code: 'BH' }, { value: 'Bangladesh', code: 'BD' }, { value: 'Barbados', code: 'BB' }, { value: 'Belarus', code: 'BY' }, { value: 'Belgium', code: 'BE' }, { value: 'Belize', code: 'BZ' }, { value: 'Benin', code: 'BJ' }, { value: 'Bermuda', code: 'BM' }, { value: 'Bhutan', code: 'BT' }, { value: 'Bolivia', code: 'BO' }, { value: 'Botswana', code: 'BW' }, { value: 'Brazil', code: 'BR' }, { value: 'Brunei Darussalam', code: 'BN' }, { value: 'Bulgaria', code: 'BG' }, { value: 'Burkina Faso', code: 'BF' }, { value: 'Burundi', code: 'BI' }, { value: 'Cambodia', code: 'KH' }, { value: 'Cameroon', code: 'CM' }, { value: 'Canada', code: 'CA' }, { value: 'Cape Verde', code: 'CV' }, { value: 'Cayman Islands', code: 'KY' }, { value: 'Central African Republic', code: 'CF' }, { value: 'Chad', code: 'TD' }, { value: 'Chile', code: 'CL' }, { value: 'China', code: 'CN' }, { value: 'Colombia', code: 'CO' }, { value: 'Comoros', code: 'KM' }, { value: 'Congo', code: 'CG' }, { value: 'Congo, The Democratic Republic of the', code: 'CD' }, { value: 'Costa Rica', code: 'CR' }, { value: 'Cote D\'ivoire', code: 'CI' }, { value: 'Croatia', code: 'HR' }, { value: 'Cuba', code: 'CU' }, { value: 'Cyprus', code: 'CY' }, { value: 'Czech Republic', code: 'CZ' }, { value: 'Denmark', code: 'DK' }, { value: 'Djibouti', code: 'DJ' }, { value: 'Dominica', code: 'DM' }, { value: 'Dominican Republic', code: 'DO' }, { value: 'Ecuador', code: 'EC' }, { value: 'Egypt', code: 'EG' }, { value: 'El Salvador', code: 'SV' }, { value: 'Equatorial Guinea', code: 'GQ' }, { value: 'Eritrea', code: 'ER' }, { value: 'Estonia', code: 'EE' }, { value: 'Ethiopia', code: 'ET' }, { value: 'Falkland Islands (Malvinas)', code: 'FK' }, { value: 'Faroe Islands', code: 'FO' }, { value: 'Fiji', code: 'FJ' }, { value: 'Finland', code: 'FI' }, { value: 'France', code: 'FR' }, { value: 'French Guiana', code: 'GF' }, { value: 'French Polynesia', code: 'PF' }, { value: 'French Southern Territories', code: 'TF' }, { value: 'Gabon', code: 'GA' }, { value: 'Gambia', code: 'GM' }, { value: 'Georgia', code: 'GE' }, { value: 'Germany', code: 'DE' }, { value: 'Ghana', code: 'GH' }, { value: 'Gibraltar', code: 'GI' }, { value: 'Greece', code: 'GR' }, { value: 'Greenland', code: 'GL' }, { value: 'Grenada', code: 'GD' }, { value: 'Guadeloupe', code: 'GP' }, { value: 'Guam', code: 'GU' }, { value: 'Guatemala', code: 'GT' }, { value: 'Guernsey', code: 'GG' }, { value: 'Guinea', code: 'GN' }, { value: 'Guinea-Bissau', code: 'GW' }, { value: 'Guyana', code: 'GY' }, { value: 'Haiti', code: 'HT' }, { value: 'Heard Island and McDonald Islands', code: 'HM' }, { value: 'Holy See (Vatican City State)', code: 'VA' }, { value: 'Honduras', code: 'HN' }, { value: 'Hong Kong', code: 'HK' }, { value: 'Hungary', code: 'HU' }, { value: 'Iceland', code: 'IS' }, { value: 'India', code: 'IN' }, { value: 'Indonesia', code: 'ID' }, { value: 'Iran, Islamic Republic of', code: 'IR' }, { value: 'Iraq', code: 'IQ' }, { value: 'Ireland', code: 'IE' }, { value: 'Isle of Man', code: 'IM' }, { value: 'Israel', code: 'IL' }, { value: 'Italy', code: 'IT' }, { value: 'Jamaica', code: 'JM' }, { value: 'Japan', code: 'JP' }, { value: 'Jersey', code: 'JE' }, { value: 'Jordan', code: 'JO' }, { value: 'Kazakhstan', code: 'KZ' }, { value: 'Kenya', code: 'KE' }, { value: 'Kiribati', code: 'KI' }, { value: 'Korea, Democratic People\'S Republic of', code: 'KP' }, { value: 'Korea, Republic of', code: 'KR' }, { value: 'Kuwait', code: 'KW' }, { value: 'Kyrgyzstan', code: 'KG' }, { value: 'Lao People\'S Democratic Republic', code: 'LA' }, { value: 'Latvia', code: 'LV' }, { value: 'Lebanon', code: 'LB' }, { value: 'Lesotho', code: 'LS' }, { value: 'Liberia', code: 'LR' }, { value: 'Libyan Arab Jamahiriya', code: 'LY' }, { value: 'Liechtenstein', code: 'LI' }, { value: 'Lithuania', code: 'LT' }, { value: 'Luxembourg', code: 'LU' }, { value: 'Macao', code: 'MO' }, { value: 'Macedonia, The Former Yugoslav Republic of', code: 'MK' }, { value: 'Madagascar', code: 'MG' }, { value: 'Malawi', code: 'MW' }, { value: 'Malaysia', code: 'MY' }, { value: 'Maldives', code: 'MV' }, { value: 'Mali', code: 'ML' }, { value: 'Malta', code: 'MT' }, { value: 'Marshall Islands', code: 'MH' }, { value: 'Martinique', code: 'MQ' }, { value: 'Mauritania', code: 'MR' }, { value: 'Mauritius', code: 'MU' }, { value: 'Mayotte', code: 'YT' }, { value: 'Mexico', code: 'MX' }, { value: 'Micronesia, Federated States of', code: 'FM' }, { value: 'Moldova, Republic of', code: 'MD' }, { value: 'Monaco', code: 'MC' }, { value: 'Mongolia', code: 'MN' }, { value: 'Montenegro', code: 'ME' }, { value: 'Montserrat', code: 'MS' }, { value: 'Morocco', code: 'MA' }, { value: 'Mozambique', code: 'MZ' }, { value: 'Myanmar', code: 'MM' }, { value: 'Namibia', code: 'NA' }, { value: 'Nauru', code: 'NR' }, { value: 'Nepal', code: 'NP' }, { value: 'Netherlands', code: 'NL' }, { value: 'Netherlands Antilles', code: 'AN' }, { value: 'New Caledonia', code: 'NC' }, { value: 'New Zealand', code: 'NZ' }, { value: 'Nicaragua', code: 'NI' }, { value: 'Niger', code: 'NE' }, { value: 'Nigeria', code: 'NG' }, { value: 'Niue', code: 'NU' }, { value: 'Norfolk Island', code: 'NF' }, { value: 'Northern Mariana Islands', code: 'MP' }, { value: 'Norway', code: 'NO' }, { value: 'Oman', code: 'OM' }, { value: 'Pakistan', code: 'PK' }, { value: 'Palau', code: 'PW' }, { value: 'Palestinian Territory, Occupied', code: 'PS' }, { value: 'Panama', code: 'PA' }, { value: 'Papua New Guinea', code: 'PG' }, { value: 'Paraguay', code: 'PY' }, { value: 'Peru', code: 'PE' }, { value: 'Philippines', code: 'PH' }, { value: 'Pitcairn', code: 'PN' }, { value: 'Poland', code: 'PL' }, { value: 'Portugal', code: 'PT' }, { value: 'Puerto Rico', code: 'PR' }, { value: 'Qatar', code: 'QA' }, { value: 'Reunion', code: 'RE' }, { value: 'Romania', code: 'RO' }, { value: 'Russian Federation', code: 'RU' }, { value: 'Rwanda', code: 'RW' }, { value: 'Saint Barthelemy', code: 'BL' }, { value: 'Saint Helena', code: 'SH' }, { value: 'Saint Kitts and Nevis', code: 'KN' }, { value: 'Saint Lucia', code: 'LC' }, { value: 'Saint Martin', code: 'MF' }, { value: 'Saint Pierre and Miquelon', code: 'PM' }, { value: 'Saint Vincent and The Grenadines', code: 'VC' }, { value: 'Samoa', code: 'WS' }, { value: 'San Marino', code: 'SM' }, { value: 'Sao Tome and Principe', code: 'ST' }, { value: 'Saudi Arabia', code: 'SA' }, { value: 'Senegal', code: 'SN' }, { value: 'Serbia', code: 'RS' }, { value: 'Seychelles', code: 'SC' }, { value: 'Sierra Leone', code: 'SL' }, { value: 'Singapore', code: 'SG' }, { value: 'Slovakia', code: 'SK' }, { value: 'Slovenia', code: 'SI' }, { value: 'Solomon Islands', code: 'SB' }, { value: 'Somalia', code: 'SO' }, { value: 'South Africa', code: 'ZA' }, { value: 'South Georgia and the South Sandwich Islands', code: 'GS' }, { value: 'Spain', code: 'ES' }, { value: 'Sri Lanka', code: 'LK' }, { value: 'Sudan', code: 'SD' }, { value: 'Suriname', code: 'SR' }, { value: 'Svalbard and Jan Mayen', code: 'SJ' }, { value: 'Swaziland', code: 'SZ' }, { value: 'Sweden', code: 'SE' }, { value: 'Switzerland', code: 'CH' }, { value: 'Syrian Arab Republic', code: 'SY' }, { value: 'Taiwan', code: 'TW' }, { value: 'Tajikistan', code: 'TJ' }, { value: 'Tanzania, United Republic of', code: 'TZ' }, { value: 'Thailand', code: 'TH' }, { value: 'Timor-Leste', code: 'TL' }, { value: 'Togo', code: 'TG' }, { value: 'Tokelau', code: 'TK' }, { value: 'Tonga', code: 'TO' }, { value: 'Trinidad and Tobago', code: 'TT' }, { value: 'Tunisia', code: 'TN' }, { value: 'Turkey', code: 'TR' }, { value: 'Turkmenistan', code: 'TM' }, { value: 'Turks and Caicos Islands', code: 'TC' }, { value: 'Tuvalu', code: 'TV' }, { value: 'Uganda', code: 'UG' }, { value: 'Ukraine', code: 'UA' }, { value: 'United Arab Emirates', code: 'AE' }, { value: 'United Kingdom', code: 'GB' }, { value: 'United States', code: 'US' }, { value: 'United States Minor Outlying Islands', code: 'UM' }, { value: 'Uruguay', code: 'UY' }, { value: 'Uzbekistan', code: 'UZ' }, { value: 'Vanuatu', code: 'VU' }, { value: 'Venezuela', code: 'VE' }, { value: 'Viet Nam', code: 'VN' }, { value: 'Virgin Islands, British', code: 'VG' }, { value: 'Virgin Islands, U.S.', code: 'VI' }, { value: 'Wallis and Futuna', code: 'WF' }, { value: 'Western Sahara', code: 'EH' }, { value: 'Yemen', code: 'YE' }, { value: 'Zambia', code: 'ZM' }, { value: 'Zimbabwe', code: 'ZW' } ], dropdown: { enabled: 1, classname: 'extra-properties' } })
```

--------------------------------

### Customizable Tagify Styles with CSS Variables

Source: https://github.com/yaireo/tagify/blob/master/docs/homepage/index.html

Demonstrates easy customization of Tagify's appearance using CSS variables for colors, borders, and spacing. This example also shows implementing minimum tag count functionality and custom tag addition via a separate button.

```css
:root {
  --tagify-tags-focus-color: #007bff;
  --tagify-tag-bg: #e0e0e0;
  --tagify-tag-text-color: #333;
  --tagify-input-border: 1px solid #ccc;
  --tagify-dropdown-item-hover-bg: #f0f0f0;
}

/* Example of custom styling for the '+' button */
.add-tag-btn {
  background-color: var(--tagify-tags-focus-color);
  color: white;
  padding: 5px 10px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}
```

--------------------------------

### Customizing Tagify Appearance with CSS Variables

Source: https://github.com/yaireo/tagify/blob/master/index.html

Demonstrates how to customize Tagify's appearance using CSS variables. This example shows a basic input field and a button, implying custom styling is applied.

```html
<input class='customLook' value='some.name@website.com'><button type="button">+</button>
```

--------------------------------

### Configure Tagify for Mixed Content Input

Source: https://github.com/yaireo/tagify/blob/master/index.html

Sets up Tagify to handle mixed content, allowing for both plain text and tags within the same input. This example demonstrates using different whitelist structures and patterns for suggestions.

```html
<textarea name='mix'>[[{"id":101, "value":"cartman", "title":"Eric Cartman"}]] and [[kyle]] do not know [[{"value":"homer simpson", "readonly":true}]] because he's a relic.</textarea>
```

--------------------------------

### Tagify Edit Start Handler

Source: https://github.com/yaireo/tagify/blob/master/test/users-list.html

Customizes the tag's text content when editing starts, formatting it as 'Name <email>'.

```javascript
function onEditStart({detail:{tag, data}}){
  tagify.setTagTextNode(tag, `${data.name} <${data.email}>`)
}
```

--------------------------------

### Initialize Tagify with Callbacks

Source: https://github.com/yaireo/tagify/blob/master/index.html

Demonstrates initializing Tagify with a list of tags and defining callbacks for adding and removing tags. The callbacks simply log the event to the console.

```javascript
var input = document.querySelector('input[name="tags"]'),
				tagify = new Tagify(input, {
					whitelist : ["que", "Donnie Darko", "Monsters, Inc.", "Prisoners", "8½", "The Terminator", "The Wizard of Oz", "Catch Me If You Can", "Groundhog Day", "Twelve Monkeys", "Zootopia", "La Haine", "Barry Lyndon", "Jaws", "The Best Years of Our Lives", "Infernal Affairs", "Udaan", "The Battle of Algiers", "Strangers on a Train", "Dog Day Afternoon", "Sin City", "Kind Hearts and Coronets", "Gangs of Wasseypur", "The Help"],
					callbacks : {
						add : console.log,
						remove : console.log
					}
				})
			})()
```

--------------------------------

### HTML Input Pattern Attribute Example

Source: https://github.com/yaireo/tagify/blob/master/README.md

The 'pattern' attribute on an input element defines the regex pattern used for validating tags. This example restricts tags to alphanumeric characters, underscores, and spaces, with a length limit of 1 to 15 characters.

```html
<input pattern='^[A-Za-z_✲ ]{1,15}$'>
```

--------------------------------

### Fetch Whitelist Suggestions with AJAX

Source: https://github.com/yaireo/tagify/blob/master/README.md

Implement dynamic suggestions by fetching a whitelist from a server as the user types. Use `AbortController` to cancel previous requests and `tagify.loading()` to show a loading animation.

```javascript
var input = document.querySelector('input'),
    tagify = new Tagify(input, {whitelist:[]}),
    controller; // for aborting the call

// listen to any keystrokes which modify tagify's input
tagify.on('input', onInput)

function onInput( e ){
  var value = e.detail.value
  tagify.whitelist = null // reset the whitelist

  // https://developer.mozilla.org/en-US/docs/Web/API/AbortController/abort
  controller && controller.abort()
  controller = new AbortController()

  // show loading animation.
tagify.loading(true)

  fetch('http://get_suggestions.com?value=' + value, {signal:controller.signal})
    .then(RES => RES.json())
    .then(function(newWhitelist){
      tagify.whitelist = newWhitelist // update whitelist Array in-place
      tagify.loading(false).dropdown.show(value) // render the suggestions dropdown
    })
}
```

--------------------------------

### getSetTagData

Source: https://github.com/yaireo/tagify/blob/master/README.md

Sets or gets data associated with a specific tag element.

```APIDOC
## getSetTagData

### Description
Set/get tag data on a tag element (has `.tagify__tag` class by default).

### Method
`getSetTagData(tagElement, data)`

### Parameters
#### Path Parameters
- **tagElement** (HTMLElement) - The tag element to get or set data for.
- **data** (Object) - Optional. The data to set for the tag.
```

--------------------------------

### setRangeAtStartEnd

Source: https://github.com/yaireo/tagify/blob/master/README.md

Sets the caret position to either the start or the end of a given node.

```APIDOC
## setRangeAtStartEnd

### Description
Places the caret at the start or the end of a node.

### Parameters
- **atEnd** (Boolean) - True to place caret at the end, false to place at the start.
- **node** (HTMLElement) - The node where the caret position should be set.
```

--------------------------------

### HTML Input Autofocus Attribute Example

Source: https://github.com/yaireo/tagify/blob/master/README.md

The 'autofocus' attribute automatically focuses the Tagify component as soon as it is loaded on the page.

```html
<input autofocus>
```

--------------------------------

### Handle Edit Start Event

Source: https://github.com/yaireo/tagify/blob/master/docs/examples/dist/users-list.html

Customizes the tag's text during edit mode. Formats the tag to display name and email.

```javascript
function onEditStart({ detail: { tag, data } }) {
  tagify.setTagTextNode(tag, `${data.name} <${data.email}>`)
}
```

--------------------------------

### Basic Textarea Initialization

Source: https://github.com/yaireo/tagify/blob/master/docs/examples/dist/textarea.html

Initializes a basic textarea with a list of suggestions and callback functions for adding and removing tags. Use this for simple tag input scenarios.

```javascript
var input = document.querySelector('input[type="text"]'),
    tagify = new Tagify(input, {
      whitelist: ["The Shawshank Redemption", "The Godfather", "The Dark Knight", "12 Angry Men", "Schindler's List", "The Lord of the Rings: The Return of the King", "Pulp Fiction", "The Good, the Bad and the Ugly", "The Lord of the Rings: The Fellowship of the Ring", "Fight Club", "Forrest Gump", "Star Wars: Episode V - The Empire Strikes Back", "Inception", "The Lord of the Rings: The Two Towers", "The Matrix", "Goodfellas", "Star Wars: Episode IV - A New Hope", "One Flew Over the Cuckoo's Nest", "Seven Samurai", "Se7en", "The Silence of the Lambs", "It's a Wonderful Life", "Life Is Beautiful", "The Great Dictator", "The Green Mile", "The Departed", "Interstellar", "The Prestige", "The Lion King", "Back to the Future", "The Shining", "The Usual Suspects", "Léon: The Professional", "The Intouchables", "The Awakening", "Casablanca", "Psycho", "City of God", "Modern Times", "Apocalypse Now", "Alien", "The Great Escape", "Terminator 2: Judgment Day", "Raiders of the Lost Ark", "Django Unchained", "The Pianist", "The Lives of Others", "Grave of the Fireflies", "Sunset Blvd.", "Amadeus", "A Clockwork Orange", "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb", "Blade Runner", "The Third Man", "The Kid", "Singin' in the Rain", "Toy Story", "Bicycle Thieves", "The Kid Detective", "The Apartment", "Whiplash", "The Grand Budapest Hotel", "The Treasure of the Sierra Madre", "The Bridge on the River Kwai", "The Princess Bride", "Hachi: A Dog's Tale", "Memories of Murder", "Stalker", "Nausicaä of the Valley of the Wind", "Drishyam", "The Truman Show", "The Grapes of Wrath", "Before Sunrise", "Touch of Evil", "Annie Hall", "The Message", "Rocky", "Gandhi", "Harry Potter and the Deathly Hallows: Part 2", "The Bourne Ultimatum", "Diabolique", "Donnie Darko", "Monsters, Inc.", "Prisoners", "8½", "The Terminator", "The Wizard of Oz", "Catch Me If You Can", "Groundhog Day", "Twelve Monkeys", "Zootopia", "La Haine", "Barry Lyndon", "Jaws", "The Best Years of Our Lives", "Infernal Affairs", "Udaan", "The Battle of Algiers", "Strangers on a Train", "Dog Day Afternoon", "Sin City", "Kind Hearts and Coronets", "Gangs of Wasseypur", "The Help"], callbacks : { add : console.log, remove : console.log } })
```

--------------------------------

### Initialize Tagify with Whitelist and Custom Templates

Source: https://github.com/yaireo/tagify/blob/master/test/basic-RTL.html

Initializes Tagify with a predefined whitelist, custom tag text property, edit options, and a custom template for no match results in RTL dropdowns. Use this for basic tag input with custom behavior.

```javascript
(() => {
  var inputElm = document.querySelector('input[name=tags-regular]')
  const mockAjax = (timeout => (RES, duration) => {
    clearTimeout(timeout);
    // abort last request
    return new Promise((resolve, reject) => timeout = setTimeout(resolve, duration || 0, RES))
  })
  let tagify = new Tagify(inputElm, {
    whitelist: ['ab x', 'cbb', 'bb', 'bb1', 'aaabb', 'bbb', 'aa', 'bba'],
    // whitelist: ["a", "ac", "aab", "aaa", "b", "bb", "ccc"],
    id: 'test1',
    tagTextProp: 'name',
    editTags: {
      clicks: 2,
    },
    transformTag: (tagData, originalData) => {
      tagData.title = tagData.value
    },
    // maxTags: 1,
    keepInvalidTags: true,
    // enforceWhitelist: true,
    dropdown: {
      enabled: 0,
      sortby: 'startsWith',
      // caseSensitive: true,
      // sortby(suggestions, query){
      // console.log(suggestions, query)
      // return suggestions;
      // }
    },
    templates: {
      dropdownItemNoMatch: function(data) {
        return `<div class='${this.settings.classNames.dropdownItem}' value="noMatch" tabindex="0" role="option">לא נמצאו תוצאות עבור: <strong>${data.value}</strong></div>`
      }
    }
  })

  // tagify.on('edit:start', ({detail}) => tagify.setTagTextNode(detail.tag, detail.data.value))
  tagify.on('edit:updated', ({detail: {tagify}}) => {
    tagify.DOM.input.focus()
  });
  inputElm && inputElm.addEventListener('change', () => console.log("CHANGED!"))

  setTimeout(() => {
    tagify.loadOriginalValues(["ac", {value: "aab", editable:false}, "aaa", "b", "bb", "ccc"])
    tagify.setDisabled(false)
  }, 500);
})()

```

--------------------------------

### HTML Input Placeholder Attribute Example

Source: https://github.com/yaireo/tagify/blob/master/README.md

The 'placeholder' attribute sets a constant placeholder text for the input field, which is visible only when no tags are entered or being typed.

```html
<input placeholder='please type your tags'>
```

--------------------------------

### Initialize Tagify with Whitelist and Dropdown Options

Source: https://github.com/yaireo/tagify/blob/master/index.html

Initializes Tagify with a comprehensive whitelist of countries and configures dropdown suggestions. The dropdown is enabled after a single character input and can have custom classes.

```javascript
var input = document.querySelector('input[name=tags]'),
    tagify = new Tagify(input, {
        whitelist: [
            { value: 'Palestinian Territory, Occupied', code: 'PS' },
            { value: 'Panama', code: 'PA' },
            { value: 'Papua New Guinea', code: 'PG' },
            { value: 'Paraguay', code: 'PY' },
            { value: 'Peru', code: 'PE' },
            { value: 'Philippines', code: 'PH' },
            { value: 'Pitcairn', code: 'PN' },
            { value: 'Poland', code: 'PL' },
            { value: 'Portugal', code: 'PT' },
            { value: 'Puerto Rico', code: 'PR' },
            { value: 'Qatar', code: 'QA' },
            { value: 'Reunion', code: 'RE' },
            { value: 'Romania', code: 'RO' },
            { value: 'Russian Federation', code: 'RU' },
            { value: 'RWANDA', code: 'RW' },
            { value: 'Saint Helena', code: 'SH' },
            { value: 'Saint Kitts and Nevis', code: 'KN' },
            { value: 'Saint Lucia', code: 'LC' },
            { value: 'Saint Pierre and Miquelon', code: 'PM' },
            { value: 'Saint Vincent and the Grenadines', code: 'VC' },
            { value: 'Samoa', code: 'WS' },
            { value: 'San Marino', code: 'SM' },
            { value: 'Sao Tome and Principe', code: 'ST' },
            { value: 'Saudi Arabia', code: 'SA' },
            { value: 'Senegal', code: 'SN' },
            { value: 'Serbia and Montenegro', code: 'CS' },
            { value: 'Seychelles', code: 'SC' },
            { value: 'Sierra Leone', code: 'SL' },
            { value: 'Singapore', code: 'SG' },
            { value: 'Slovakia', code: 'SK' },
            { value: 'Slovenia', code: 'SI' },
            { value: 'Solomon Islands', code: 'SB' },
            { value: 'Somalia', code: 'SO' },
            { value: 'South Africa', code: 'ZA' },
            { value: 'South Georgia and the South Sandwich Islands', code: 'GS' },
            { value: 'Spain', code: 'ES' },
            { value: 'Sri Lanka', code: 'LK' },
            { value: 'Sudan', code: 'SD' },
            { value: 'Suriname', code: 'SR' },
            { value: 'Svalbard and Jan Mayen', code: 'SJ' },
            { value: 'Swaziland', code: 'SZ' },
            { value: 'Sweden', code: 'SE' },
            { value: 'Switzerland', code: 'CH' },
            { value: 'Syrian Arab Republic', code: 'SY' },
            { value: 'Taiwan', code: 'TW' },
            { value: 'Tajikistan', code: 'TJ' },
            { value: 'Tanzania, United Republic of', code: 'TZ' },
            { value: 'Thailand', code: 'TH' },
            { value: 'Timor-Leste', code: 'TL' },
            { value: 'Togo', code: 'TG' },
            { value: 'Tokelau', code: 'TK' },
            { value: 'Tonga', code: 'TO' },
            { value: 'Trinidad and Tobago', code: 'TT' },
            { value: 'Tunisia', code: 'TN' },
            { value: 'Turkey', code: 'TR' },
            { value: 'Turkmenistan', code: 'TM' },
            { value: 'Turks and Caicos Islands', code: 'TC' },
            { value: 'Tuvalu', code: 'TV' },
            { value: 'Uganda', code: 'UG' },
            { value: 'Ukraine', code: 'UA' },
            { value: 'United Arab Emirates', code: 'AE' },
            { value: 'United Kingdom', code: 'GB' },
            { value: 'United States', code: 'US' },
            { value: 'United States Minor Outlying Islands', code: 'UM' },
            { value: 'Uruguay', code: 'UY' },
            { value: 'Uzbekistan', code: 'UZ' },
            { value: 'Vanuatu', code: 'VU' },
            { value: 'Venezuela', code: 'VE' },
            { value: 'Viet Nam', code: 'VN' },
            { value: 'Virgin Islands, British', code: 'VG' },
            { value: 'Virgin Islands, U.S.', code: 'VI' },
            { value: 'Wallis and Futuna', code: 'WF' },
            { value: 'Western Sahara', code: 'EH' },
            { value: 'Yemen', code: 'YE' },
            { value: 'Zambia', code: 'ZM' },
            { value: 'Zimbabwe', code: 'ZW' }
        ],
        dropdown: {
            enabled: 1, // suggest tags after a single character input
            classname: 'extra-properties' // custom class for the suggestions dropdown
        } // map tags' values to this property name, so this property will be the actual value and not the printed value on the screen
    })

```

--------------------------------

### Configure Tagify Suggestions Dropdown

Source: https://github.com/yaireo/tagify/blob/master/README.md

Set up a whitelist for suggestions and configure the dropdown's appearance and behavior, including enabling it on focus and limiting displayed items.

```javascript
var input = document.querySelector('input'),
    tagify = new Tagify(input, {
        whitelist : ['aaa', 'aaab', 'aaabb', 'aaabc', 'aaabd', 'aaabe', 'aaac', 'aaacc'],
        dropdown : {
            classname     : "color-blue",
            enabled       : 0,              // show the dropdown immediately on focus
            maxItems      : 5,
            position      : "text",         // place the dropdown near the typed text
            closeOnSelect : false,          // keep the dropdown open after selecting a suggestion
            highlightFirst: true
        }
    });
```

--------------------------------

### HTML Input ReadOnly Attribute Example

Source: https://github.com/yaireo/tagify/blob/master/README.md

Setting the 'readOnly' attribute prevents any user interaction with the Tagify component, disallowing adding, removing, or editing of tags.

```html
<input readOnly>
```

--------------------------------

### Initialize Tagify with Whitelist

Source: https://github.com/yaireo/tagify/blob/master/test/text-input.html

Initializes the Tagify library on an input element, enforcing a whitelist and dynamically populating it from the input's initial value. Use this to set up Tagify with predefined or dynamically generated tag suggestions.

```javascript
var inputElm = document.querySelector('input[name=input]');
var whitelist = [
  "A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript", "Ada", "Adenine", "Agda", "Agilent VEE", "Agora", "AIMMS", "Alef", "ALF", "ALGOL 58", "ALGOL 60", "ALGOL 68", "ALGOL W", "Alice", "Alma-0", "AmbientTalk", "Amiga E", "AMOS", "AMPL", "Apex (Salesforce.com)", "APL", "AppleScript", "Arc", "ARexx", "Argus", "AspectJ", "Assembly language", "ATS", "Ateji PX", "AutoHotkey", "Autocoder", "AutoIt", "AutoLISP / Visual LISP", "Averest", "AWK", "Axum", "Active Server Pages", "ASP.NET", "B", "Babbage", "Bash", "BASIC", "bc", "BCPL", "BeanShell", "Batch (Windows/Dos)", "Bertrand", "BETA", "Bigwig", "Bistro", "BitC", "BLISS", "Blockly", "BlooP", "Blue", "Boo", "Boomerang", "Bourne shell (including bash and ksh)", "BREW", "BPEL", "B", "C--", "C++ – ISO/IEC 14882", "C# – ISO/IEC 23270", "C/AL", "Caché ObjectScript", "C Shell", "Caml", "Cayenne", "CDuce", "Cecil", "Cesil", "Céu", "Ceylon", "CFEngine", "CFML", "Cg", "Ch", "Chapel", "Charity", "Charm", "Chef", "CHILL", "CHIP-8", "chomski", "ChucK", "CICS", "Cilk", "Citrine (programming language)", "CL (IBM)", "Claire", "Clarion", "Clean", "Clipper", "CLIPS", "CLIST", "Clojure", "CLU", "CMS-2", "COBOL – ISO/IEC 1989", "CobolScript – COBOL Scripting language", "Cobra", "CODE", "CoffeeScript", "ColdFusion", "COMAL", "Combined Programming Language (CPL)", "COMIT", "Common Intermediate Language (CIL)", "Common Lisp (also known as CL)", "COMPASS", "Component Pascal", "Constraint Handling Rules (CHR)", "COMTRAN", "Converge", "Cool", "Coq", "Coral 66", "Corn", "CorVision", "COWSEL", "CPL", "CPL", "Cryptol", "csh", "Csound", "CSP", "CUDA", "Curl", "Curry", "Cybil", "Cyclone", "Cython", "Java", "Javascript", "M2001", "M4", "M#", "Machine code", "MAD (Michigan Algorithm Decoder)", "MAD/I", "Magik", "Magma", "make", "Maple", "MAPPER now part of BIS", "MARK-IV now VISION:BUILDER", "Mary", "MASM Microsoft Assembly x86", "MATH-MATIC", "Mathematica", "MATLAB", "Maxima (see also Macsyma)", "Max (Max Msp – Graphical Programming Environment)", "Maya (MEL)", "MDL", "Mercury", "Mesa", "Metafont", "Microcode", "MicroScript", "MIIS", "Milk (programming language)", "MIMIC", "Mirah", "Miranda", "MIVA Script", "ML", "Model 204", "Modelica", "Modula", "Modula-2", "Modula-3", "Mohol", "MOO", "Mortran", "Mouse", "MPD", "Mathcad", "MSIL – deprecated name for CIL", "MSL", "MUMPS", "Mystic Programming L"
];

var tagify = new Tagify(inputElm, {
  enforceWhitelist: true,
  whitelist: [...new Set(inputElm.value.trim().split(/\s*,\s*/))] // Array of values. stackoverflow.com/a/43375571/104380
});
```
Tokens:
Raw