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とかのほうが安全です（ただシード的にも桁数的にも簡単にはかぶらないと思います）