入力インターフェースを直感的にしてくれるタグ入力コンポーネント「Tagify」

Tagifyとは

タグ入力のインターフェイスは、ライブラリはたくさんあるものの、叶えたい機能を備えているものが少なく、選択に困ることが多いと思います。
そんな複雑な仕様に応えてくれるコンポーネントがTagifyです。

使い方

まずはTagifyをインストールします。

インストール

npm i @yaireo/tagify --save
yarn add @yaireo/tagify

CDNから使用する場合

<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />

下記コードを書くことでinputフィールドをtagifyに変換することができます。

const inputElem = document.querySelector('input') 
const tagify = new Tagify(inputElem, {
    placeholder: "Type foo... bar...",
    whitelist: ['foo', 'bar', 'and baz', 0, 1, 2]
})

ドロップダウン方式で表示する

dropdown.enabledを0にすることで入力のサジェスト機能だけではなく、ドロップダウン方式で表示する事ができます。
また、enforceWhitelist.trueにすることでwhitelist以外の入力でのタグ作成を無効にすることができます。

ドロップダウンを有効にする

const inputElem = document.querySelector('input') 
const tagify = new Tagify(inputElem, {
    placeholder: "Select tags",
    whitelist: ['foo','bar','apple','banana','cherry','orange'],
    enforceWhitelist: true,
    dropdown: {
        enabled: 0,
    }
})

テキストエリアをタグ入力する

mode.’mix’にすることで複数行入力とテキストの途中にタグを入力することができます。
また、pattern./#/を指定することで入力候補を出現させるキーワードの指定が可能です。こちらは正規表現での指定ができますので複数候補がある場合は /#|@/ などとしてください。

テキストエリアに対応する

const textArea = document.querySelector('textarea') 
const tagify = new Tagify(textArea, {
    mode: 'mix',
    pattern: /#/,
    placeholder: "#foo #bar...",
    whitelist: ['foo','bar','apple','banana','cherry','orange'],
    enforceWhitelist: true,
    dropdown: {
        enabled: 1,
    }
})

tagify.on(‘input’)でイベントのコールバックを指定できますので、下記のようにprefixによってホワイトリストを切り替える事もできます。

prefixでホワイトリストを切り替える

const whitelist1 = ['foo','bar','apple','banana','cherry','orange']
const whitelist2 = ['Mike','Jackson','Harry','Sophia','Chloe','Emma']
const textArea = document.querySelector('textarea') 
const tagify = new Tagify(textArea, {
    mode: 'mix',
    pattern: /#|@/,
    placeholder: "#tag and @username",
    whitelist: [],
    enforceWhitelist: true,
    dropdown: {
        enabled: 1,
    }
})

tagify.on('input', (e) => {
    const prefix = e.detail.prefix;
 
    if( prefix ){
        if( prefix == '#' )
            tagify.whitelist = whitelist1;

        if( prefix == '@' )
            tagify.whitelist = whitelist2;

    }
})

ReactやVueで使う際の注意点

ReactやVueなどのフレームワークを使う際にreactiveな値にtagifyを使用すると、オブジェクトのプロパティに変更が加わった際にリセットされてしまいます。

Vue3での例ですが下記のようにすることでreactiveな要素にも変更を反映させることができます。

:valueに値を指定

<input type="text" placeholder="キーワード検索" ref="keywordEl" :value="searchData.keyword" @input="handleInput">

const keywordEl = ref()
const searchData = ref({
    keyword: ""
})
const handleInput =() => {
    // inputのvalueに変更が加わったら変数へ代入
    searchData.value.keyword = keywordEl.value.value
}