プロジェクトの要件定義に「５文字以上入力されたときに、DBから取得したリストを絞り込み、入力補完を行う機能を実装」という項目があり、担当することになったので備忘録も兼ね、注意事項やサンプルを載せます。
【まず初めに】
今回はVue.jsのライブラリにある「vue-simple-suggest」を利用しました。ちなみに<input>と比較的新しくhtmlに追加されている<datalist>という要素を利用すれば簡単に作れますが、１つだけ問題点があり、2019年2月1日時点ですがiOSが対応してないこと。私が担当したプロジェクトではAndroidとiPhoneで利用するシステムだったため利用を断念しました。凄い簡単だったので今後対応するといいですね。もし「iOSは大丈夫！」ということであれば、「datalist」で検索すると色々出てきますのでそちらを参考にしてください。
https://mamewaza.com/support/blog/datalist.html
【早速やってみましょう】
ちなみに準備は「vue-simple-suggest」をインストールするだけ！
あとはvueファイルで呼び出して書くだけ！インストールはNode.jsで下記のコードを実行してください。
npm install –save vue-simple-suggest
これで準備は完了です。
実際のサンプルはこちら↓
短いですよね。これだけで実装可能です。
ちなみに、このライブラリについての参考ページが日本語で書かれているものが無く、解釈が間違っている部分もあるかもしれませんが、templateの部分だけ簡単に説明します。
//この部分でinputとlistを表示
<vue-simple-suggest
v-model=”test”
//リスト表示させるデータを読み込み
:list=”testSuggestionList”
//これがないとフィルタリングされません
:filter-by-query=”true”
//何文字入力したらフィルタリングされるかの設定
:min-length=”3″>
//input要素の設定を行えます。CSSでデザイン変更も可能
// autocompleteはoffにしておかないと、ブラウザ上のautocompleteとリストが被ります
<input placeholder=”入力してください” id=”suggest-input” autocomplete=”off”>
</vue-simple-suggest>
以上です。
他にも色々なオプションや設定がありますが、最低限これだけあれば動きます。もし細かく設定したい場合は、最後に貼ってあるリンク先で確認してみてください。（英語になっているので翻訳を掛けてください・・・。）
ちなみに、リストの候補ですが、外部データから取得したJSONデータでも表示が可能です。実際に実装を行った際は、PHPでjson_encodeした配列をaxios.getで取得し、表示することが出来ました。
【まとめ】
いかがでしたでしょうか？自分はここに至るまでに凄く苦戦しましたが、これを使ってからはあっさり解決してしまい「もっと早く知っておけば・・・」という気持ちでした。
日本語の参考ページが無いものなので、このブログが誰かの助けになってくれることを願います。
https://www.npmjs.com/package/vue-simple-suggest#custom-suggestion-item
