[JavaScript] いつものタグ入力UIを、少し簡単にするTagify

Tagify

2021年のトレンドになっているらしいのでやってみた。

ドキュメント

公式

GitHub

サンプル

See the Pen Tagify by ハタユウジ@コーポレートエンジニア (@shikumiya_hata) on CodePen.

html

<p>
  <label for='tags'>1. テキストボックス内にタグ</label>
  <input id="tags" name='tags' value='javascript, ライブラリ' autofocus>
</p>
<p>
  <label for='tagsOutside'>2. テキストボックスの外にタグ</label>
  <input id='tagsOutside' name='tags-outside' class='tagify--outside' value='javascript, ライブラリ' placeholder='タグを書くのもwhitelistから選択もできる'>
</p>
<p>
  <label for='tagCustom'>3. 見た目カスタマイズ</label>
  <input id="tagCustom" class='customLook' value='javascript, ライブラリ'><button type="button">+</button>
</p>

※CSSは長いので省略

js

/* 1. テキストボックス内にタグ */
var inputInside = document.querySelector('input[name=tags]');
var tagifyInside = new Tagify(inputInside);

/* 2. テキストボックスの外にタグ */
var inputOutside = document.querySelector('input[name=tags-outside]');
var tagifyOutside = new Tagify(inputOutside, {
  whitelist: ['javascript', 'js', 'ライブラリ', 'library'], //デフォルトで選択可能なタグ候補
  dropdown: {
    position: "input",
    enabled : 0 
  }
});

/* 3. 見た目カスタマイズ */
var inputCustomLook = document.querySelector('.customLook'),
    tagify = new Tagify(inputCustomLook, {
      dropdown : {
        position: 'text',
        enabled: 1
      }
    }),
    button = inputCustomLook.nextElementSibling;

button.addEventListener("click", onAddButtonClick)

// ＋ボタン押下時
function onAddButtonClick(){
    tagify.addEmptyTag() // 新しいタグを追加
}

ちなみに、valueを取り出すとこんな風になってます。

value

[
  {"value":"javascript"},
  {"value":"ライブラリ"}
]