Zenn
ラブグラフのエンジニアブログPublicationへの投稿
🐿️

Vue.js と Materialize の Chips で複数選択の入力フィールドを作る

けいすけ
2024/06/17に公開
Vue.js
materialize
tech

こんにちは！
株式会社ラブグラフのエンジニアのけいすけと申します！

今回は Vue.js と Materialize Chips を使って、下の画像にあるような複数選択ができる入力フィールドの作り方を紹介します。簡単に作れて入力の補完もできます！

サンプル

下に CodePen のサンプルを用意しました。ぜひ触ってみてください！
これ以降の説明でタグという用語が出てきますが、フォームに入力された選択肢のことだと思ってください。（下のサンプルにある「HTML」や「CSS」など）
このサンプルでできることは次の3つです。

  • タグを追加する
  • タグを削除する
  • 文字列を入力すると候補を表示する（p とか s を入力してみてください）

ソースコード

HTML のソースコードです。入力フィールドと送信ボタンだけのシンプルなフォームです。隠しフィールドを使って選択されたタグの値を送信します。chips というクラスが付いた要素の中に input 要素を入れてください。

HTML

<div class="container">
  <div class="row">
    <div class="col s12">
      <form action="">
        <div class="chips input-field" id="languages">
          <input class="input">
        </div>
        <input type="hidden" name="languages" :value="languagesString">
        <button class="btn waves-effect waves-light" type="submit" name="action">
          Submit
          <i class="material-icons right">send</i>
        </button>
      </form>
    </div>
  </div>
</div>

https://materializecss.com/grid

JavaScript

JavaScript のソースコードです。今回は languages という配列にフォームで入力されたタグの値が入っています。M.Chips.init 関数が Materialize の Chips の使い方のキモになる部分です。使い方はソースコードの後に書いています。

const app = Vue.createApp({
  data() {
    return {
      instances: null,
      languages: [
        { tag: 'HTML' },
        { tag: 'CSS' },
      ],
    };
  },
  computed: {
    languagesString() {
      return this.languages.map(language => language.tag);
    },
  },
  mounted() {
    const el = document.getElementById('languages');
    this.instances = M.Chips.init(el, {
      placeholder: 'Enter a tag',
      secondaryPlaceholder: 'Add a Tag',
      data: this.languages,
      autocompleteOptions: {
        data: {
          'HTML': null,
          'CSS': null,
          'JavaScript': null,
          'Python': null,
          'SQL': null,
        },
        limit: Infinity,
        minLength: 1,
      },
    });
  },
});

app.mount('.container');

Materialize Chips の使い方

Materialize Chips を使うには、M.Chips.init の第1引数にタグを入力する要素（今回の場合は languages という id が付いた要素）を、第2引数にオプションを指定します。

placeholder

タグが1つも入力されていないときのプレイスホルダー

secondaryPlaceholder

タグが1つ以上入力されているときのプレイスホルダー

data

入力フィールドにデフォルトで表示するタグ
次のようなオブジェクトの配列

[
  { tag: 'HTML' },
  { tag: 'CSS' },
]

autocompleteOptions

autocompleteOptions は入力の補完のためのオプションです。
次の5つの項目がありますが、今回はサンプルで使った3つだけ紹介します。

  • data
  • limit
  • minLength
  • onAutocomplete
  • sortFunction

onAutocomplete、sortFunction については次のページを参考にしてください。

https://materializecss.com/autocomplete.html

data

入力補完時に表示する候補
オブジェクトの配列で、キーに HTML などのタグのラベル、値に画像のパスを指定する。画像がない場合は null を指定する。画像のパスを指定すると、下のようにタグの左に丸い画像が表示されます。

limit

表示する候補数の最大値。Infinity を指定するとすべての候補を表示します。

minLength

候補を表示するのに必要な入力文字数。例えば 3 を指定したら、3文字入力して初めて候補が表示されます。

最後に

ここまで読んでいただきありがとうございます！
複数選択の入力フォームが必要になったときにぜひ使ってみてください！

参考文献

https://materializecss.com/chips.html

ラブグラフのエンジニアブログ
ラブグラフのエンジニアブログPublication

corporate.lovegraph.me 出張写真撮影サービス『ラブグラフ』やオンライン写真教室『ラブグラフアカデミー』を提供しています

Discussion