Vue.jsでサジェストを実現するライブラリ3選
Google検索で、キーワードの一部を入力すると、そのキーワードを含む候補をその下に表示する機能があります。
この機能の名前を「サジェスト」と言います。
スマートフォンからのネット利用が、PCからのネット利用を超えているモバイルファーストの時代において、サジェストは、スマホでもサクサク入力できる有力な手段になります。
今回は、JavaScirpt フレームワークの「Vue.js」で、サジェスト入力を実現するライブラリを 3つ 紹介したいと思います！
サジェストを実現するライブラリ１『vue-simple-suggest』
1つ目は、「vue-simple-suggest」を紹介します。
名前の通り、シンプルなサジェストライブラリで、npm でダウンロード数が一番多いライブラリです。
インストール
CDN 版の Vue.js アプリの場合、html に次の2行を足すだけで「vue-simple-suggest」がインストールできます。
1<script type="text/javascript" src="https://unpkg.com/vue-simple-suggest"></script>
2<link rel="stylesheet" href="https://unpkg.com/vue-simple-suggest/dist/styles.css">関連記事
CDN 版の Vue.js アプリで作り方は、以下の記事が参考になりますので、是非ご覧ください！
Vue CLI や、Nuxt.js でプロジェクトを作っている場合
Vue CLI や、Nuxt.js でプロジェクトを作っている場合は、npm または yran 経由で「vue-simple-suggest」をインストールします。
1# npmでインストールする場合
2npm install --save vue-simple-suggest
3# yarnでインストールする場合
4yarn add vue-simple-suggesthtmlにコンポーネント を追加
html に、以下の通り <vue-simple-suggest> タグと、JavaScirpt の処理を追加しましょう。
1<div id="app">
2 <vue-simple-suggest
3 v-model="selected"
4 :list="suggestionList"
5 :filter-by-query="true">
6 </vue-simple-suggest>
7</div>
8
9<script>
10 const app = new Vue({
11 el: '#app',
12 data: {
13 selected: null,
14 suggestionList: ['Canada', 'China', 'Cameroon', "Italy", "Iraq", "Iceland"]
15 }
16 })
17</script><vue-simple-suggest> タグの v-model に、候補リストで選択された値を入れるモデルのプロパティを指定。
:list に、サジェストするリストが格納されたモデルのプロパティを指定します。
:filter-by-query= を ture にすると、キーワードに入力した文字に、部分一致する候補で自動的にフィルターされます。
動作を確認
作成した html をブラウザで表示すると、次のイメージの通りテキストボックスが表示されていると思います。
キーワードの一部を入力すると、そのキーワード含む候補でリストが絞り込まれて表示されます。
わずか、10行程度のコードで、簡単にサジェスト入力が実現できました。
サジェストのカスタマイズ
「vue-simple-suggest」は、デザインを独自 html で自由にカスタマイズできます。
カスタマイズする html は、slot="suggestion-item" 内に記述します。
次のコードでは、サジェストする項目に、国のアイコンと国の名前を表示するよう、html をカスタマイズしています。
1<vue-simple-suggest
2 v-model="selected"
3 :list="suggestionList"
4 :filter-by-query="true">
5 <!-- アイコンとテキストを表示するhtmlにカスタマイズー -->
6 <template slot="suggestion-item" slot-scope="{ suggestion }">
7 <div>
8 <img :src="'img/'+ suggestion + '.png'" width="30px"/>
9 <span>{{ suggestion }}</span>
10 </div>
11 </template>
12</vue-simple-suggest>非同期でサジェストするデータを取得
実際の Web 開発では、サジェストに表示する候補リストは、REST API などで非同期で取得することが多いでしょう。
「vue-simple-suggest」は、非同期でのデータ取得にも対応しています。
まず、非同期通信ライブラリの「axios」を、CDN から読み込みましょう。
1<script src="https://unpkg.com/axios/dist/axios.min.js"></script>次に、html および JavaScirpt の部分を、以下の通り修正します。
1<div id="app">
2 <vue-simple-suggest
3 v-model="selected"
4 display-attribute="name"
5 value-attribute="id"
6 :list="getSuggestionList">
7 </vue-simple-suggest>
8</div>
9
10<script>
11 const app = new Vue({
12 el: '#app',
13 data: {
14 selected: null
15 },
16 methods: {
17 async getSuggestionList() {
18 var response = await fetch('https://<apiのurl>', { method: 'GET' })
19 return response.results
20 }
21 }
22 })
23</script>ポイントは、:list プロパティに、リストではなく関数を指定していることです。
これにより、テキストを入力する毎に getSuggestionList 関数が呼ばれ、非同期で API 等から取得したデータをサジェストに表示できます。
サジェストを実現するライブラリ２『vue-autosuggest』
「vue-autosuggest」は、2019年5月に npm に登録され、2020年4月時点で25,000ダウンロードされている人気上昇中のライブラリです。
インストール
CDN でのインストールは、html に以下の1行を追加します。
1<script src="https://cdn.jsdelivr.net/npm/vue-autosuggest@2.1.1/dist/vue-autosuggest.min.js"></script>npm または yran 経由でのインストールの場合
npm または yran 経由でのインストールの場合、次のコマンドを使用します。
1# npmでインストールする場合
2npm install --save vue-simple-suggest
3# yarnでインストールする場合
4yarn add vue-simple-suggesthtmlにコンポーネント を追加
少々コードが長いですが、html に <vue-autosuggest> タグと、JavaScirpt の処理を追加します。
1<div id="app">
2 <vue-autosuggest
3 v-model="selected"
4 :suggestions="filteredOptions">
5 </vue-autosuggest>
6</div>
7
8<script>
9 const app = new Vue({
10 el: '#app',
11 data() {
12 return {
13 selected: '',
14 options: [{
15 data: ['Canada', 'China', 'Cameroon', "Italy", "Iraq", "Iceland" ]
16 }]
17 };
18 },
19 computed: {
20 filteredOptions() {
21 return [
22 {
23 data: this.options[0].data.filter(option => {
24 return option.toLowerCase().indexOf(this.selected.toLowerCase()) > -1;
25 })
26 }
27 ];
28 }
29 }
30 })
31</script>基本的な使い方は、1つ目に紹介した「vue-simple-suggest」と同じです。
v-model に選択値を入れるモデルのプロパティを、suggestions にサジェストするリストのプロパティを設定します。
「vue-autosuggest」には、入力したキーワードでサジェストを自動的に絞り込む機能がないため、filteredOptions メソッドでサジェストするリストを、自前の処理で絞り込んでいます。
動作を確認
作成した html をブラウザで表示すると、次のようなイメージになります。
最初は CSS が指定されていないため、下記リンクの「Advanced usage:」の項に書かれている CSS を参考に、設定してください。
【参考サイト】
https://www.npmjs.com/package/vue-autosuggest#suggestionsProp
サジェストを実現するライブラリ３『vue-cool-select』
最後に紹介するのは「vue-cool-select」です。
こちらも他のライブラリと同様、簡単にサジェスト機能をVueアプリに追加できます。
「vue-cool-select」の特徴は、デモサイトがしっかり作り込まれている所。
そして、シンプルな使い方や、REST APIを使ったサンプル、Slot と使った複雑なデザインのサンプルなど、色々なサンプルコードを実際に動作させながら確認できます。
【vue-cool-select のデモサイト】
https://iliyazelenko.github.io/vue-cool-select/#/before-after-slots
インストール
CDN でのインストールは、html に以下の内容を追加します。
1<script src="https://unpkg.com/vue-cool-select"></script>
2
3<!--"bootstrap" テーマを利用する場合 -->
4<link rel="stylesheet" href="https://unpkg.com/vue-cool-select/dist/themes/bootstrap.css">
5<!-- "マテリアルデザイン" テーマを利用する場合 -->
6<link rel="stylesheet" href="https://unpkg.com/vue-cool-select/dist/themes/material-design.css">npm または yran 経由でのインストールの場合
npm または yran 経由でのインストールの場合、次のコマンドを使用します。
1# npmでインストールする場合
2npm install --save vue-cool-select
3# yarnでインストールする場合
4yarn add vue-cool-selectサンプルコード
先述したように、「vue-cool-select」はデモサイトが充実しているため、ここではデモサイトで、どんなサンプルコードが試せるか紹介したいと思います！
サイトは、左側にサンプルコード、右側に実行イメージが表示されており、右上のリンクを切り替えることで、以下のサンプルコードを確認できます。
| Simple example | 最もシンプルな利用方法のサンプル |
| Item Slot | Slotを使って候補のリストのデザインをカスタマイズするサンプル |
| REST API | サジェストするリストをREST APIで非同期で取得するサンプル |
| Validation | 必須入力チェックなどのバリデーションのサンプル |
| Input Slots | Slotで入力ボックスのデザインをカスタマイズするサンプル |
| Before and After Slots | 候補リストにヘッダー・フッターを付けるサンプル |
| No search | 入力がないリスト選択のサンプル |
| Disabled Items | リストの一部のアイテムを非活性にするサンプル |
| Open at the beginning | 常に候補のリストを表示するサンプル |
| Search text control | JavaScriptで候補リストのアイテムを選択するサンプル |
| Menu default position | リストの表示位置を変更するサンプル |
さいごに
どのライブラリも簡単に導入できて、どれを利用しようか迷ってしまいますね！
Vue.jsでは、ライブラリを使うことで簡単にサジェスト入力を実現できます。
是非、試してみてください！
こちらの記事もオススメ！
2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説！JavaScriptの歴史【紆余曲折を経たプログラミン...
2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...
