Vuejsで簡単自作オートコンプリート実装

オートコンプリートのライブラリはあるのですが、原理としてはHTML5のdatalistとinputを使えばサクッと簡単に実装できるので今回紹介します。

今回つくるもの

See the Pen
Vuejs AutoComplete
by eta (@0eta0)
on CodePen.

単純なオートコンプリート機構です。
コンポーネント化されていて何個でも設置することができます。

詳細

仕組み1

datalistとinput

  <input
    :list="variableId" //ここでdatalistとひもづけ
    :type="type"
    :placeholder="placeholder"
    :value="value"
    @input="changeValue"
    v-on:keyup.enter="keyupEnter"
  />
  <datalist :id="variableId">
    <option
      v-for="item in filteredList"
      :key="item.name + variableId"
      :value="item.name"
      v-text="item.name"
    ></option>
  </datalist>
  • datalist
  • input

見てわかるように上2つのHTMLタグを使って実装されています。
それぞれの詳しい説明はリファレンスをどうぞ
参考 <datalist>developer.mozilla.org

仕組み2

表示側は「仕組み1」で問題ないのですが、ロジック的にdatalistに渡しているオブジェクトをフィルタリングしなければいけません。

filtering datalist
  computed: {
    filteredList: function() {
      return this.datalist.filter(data => data.name.toLowerCase().indexOf(this.value.toLowerCase()) !== -1 && data.name.toLowerCase() != this.value.toLowerCase());
    }
  }

ここでは単純に、オブジェクト(datalist)のプロパティ(name)にinputに入力されている文字列を含んでいるかどうかでフィルタリングしています。

MEMO
すべて小文字にしてフィルタリングしているため、大文字小文字は区別していません

ポイント

datalistとinput

  <input
    :list="variableId" //ここ
...
  <datalist :id="variableId"> // ここ
    <option
      v-for="item in filteredList"
      :key="item.name + variableId" // ここ

idや何やらで、variableIdというものを使用しています。
これはコンポーネントを同じページで使いまわしたときに、idがかぶってバグるのを防ぐためです。
ここでは、variableIdをrandにしてますが、UUIDとかのほうが安全です(ただシード的にも桁数的にも簡単にはかぶらないと思います)

注意

datalistにはcssを当てることができないので、候補が出てくる部分はスタイルを変えられません。
見た目的に特段悪いわけではないのですが、変更したくなったらライブラリを使ったほうが楽です。

まとめ

フィルタリングのロジックを自分で簡単にかけるため、かなり柔軟なフィルタリングが可能になります。
CSSが当てられない欠点はあるものの、簡単にオートコンプリートを実装できるのでおすすめのやり方です。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください