1. HOME
  2. ブログ
  3. エンジニアになろう!
  4. Vue.jsでサジェストを実現するライブラリ3選

Vue.jsでサジェストを実現するライブラリ3選

Vue.jsでサジェストを実現するライブラリ3選

Google検索で、キーワードの一部を入力すると、そのキーワードを含む候補をその下に表示する機能があります。

この機能の名前を「サジェスト」と言います。

スマートフォンからのネット利用が、PCからのネット利用を超えているモバイルファーストの時代において、サジェストは、スマホでもサクサク入力できる有力な手段になります。

今回は、JavaScirpt フレームワークの「Vue.js」で、サジェスト入力を実現するライブラリを 3つ 紹介したいと思います!

サジェストを実現するライブラリ1『vue-simple-suggest』

1つ目は、「vue-simple-suggest」を紹介します。

名前の通り、シンプルなサジェストライブラリで、npm でダウンロード数が一番多いライブラリです。

インストール

CDN 版の Vue.js アプリの場合、html に次の2行を足すだけで「vue-simple-suggest」がインストールできます。

関連記事

CDN 版の Vue.js アプリで作り方は、以下の記事が参考になりますので、是非ご覧ください!

Vue CLI や、Nuxt.js でプロジェクトを作っている場合

Vue CLI や、Nuxt.js でプロジェクトを作っている場合は、npm または yran 経由で「vue-simple-suggest」をインストールします。

htmlにコンポーネント を追加

html に、以下の通り <vue-simple-suggest> タグと、JavaScirpt の処理を追加しましょう。

<vue-simple-suggest> タグの v-model に、候補リストで選択された値を入れるモデルのプロパティを指定。

:list に、サジェストするリストが格納されたモデルのプロパティを指定します。

:filter-by-query= を ture にすると、キーワードに入力した文字に、部分一致する候補で自動的にフィルターされます

動作を確認

作成した html をブラウザで表示すると、次のイメージの通りテキストボックスが表示されていると思います。

キーワードの一部を入力すると、そのキーワード含む候補でリストが絞り込まれて表示されます。

わずか、10行程度のコードで、簡単にサジェスト入力が実現できました

サジェストのカスタマイズ

「vue-simple-suggest」は、デザインを独自 html で自由にカスタマイズできます

カスタマイズする html は、 slot="suggestion-item" 内に記述します。

次のコードでは、サジェストする項目に、国のアイコンと国の名前を表示するよう、html をカスタマイズしています。

非同期でサジェストするデータを取得

実際の Web 開発では、サジェストに表示する候補リストは、REST API などで非同期で取得することが多いでしょう。

「vue-simple-suggest」は、非同期でのデータ取得にも対応しています

まず、非同期通信ライブラリの「axios」を、CDN から読み込みましょう。

次に、html および JavaScirpt の部分を、以下の通り修正します。

ポイントは、 :list プロパティに、リストではなく関数を指定していることです。

これにより、テキストを入力する毎に getSuggestionList 関数が呼ばれ、非同期で API 等から取得したデータをサジェストに表示できます。

サジェストを実現するライブラリ2『vue-autosuggest』

「vue-autosuggest」は、2019年5月に npm に登録され、2020年4月時点で25,000ダウンロードされている人気上昇中のライブラリです。

インストール

CDN でのインストールは、html に以下の1行を追加します。

npm または yran 経由でのインストールの場合

npm または yran 経由でのインストールの場合、次のコマンドを使用します。

htmlにコンポーネント を追加

少々コードが長いですが、html に <vue-autosuggest> タグと、JavaScirpt の処理を追加します。

基本的な使い方は、1つ目に紹介した「vue-simple-suggest」と同じです。

v-model に選択値を入れるモデルのプロパティを、 suggestions にサジェストするリストのプロパティを設定します。

「vue-autosuggest」には、入力したキーワードでサジェストを自動的に絞り込む機能がないため、 filteredOptions メソッドでサジェストするリストを、自前の処理で絞り込んでいます

動作を確認

作成した html をブラウザで表示すると、次のようなイメージになります。

最初は CSS が指定されていないため、下記リンクの「Advanced usage:」の項に書かれている CSS を参考に、設定してください。

【参考サイト】
https://www.npmjs.com/package/vue-autosuggest#suggestionsProp

サジェストを実現するライブラリ3『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 に以下の内容を追加します。

npm または yran 経由でのインストールの場合

npm または yran 経由でのインストールの場合、次のコマンドを使用します。

サンプルコード

先述したように、「vue-cool-select」はデモサイトが充実しているため、ここではデモサイトで、どんなサンプルコードが試せるか紹介したいと思います!

サイトは、左側にサンプルコード、右側に実行イメージが表示されており、右上のリンクを切り替えることで、以下のサンプルコードを確認できます。

Simple example最もシンプルな利用方法のサンプル
Item SlotSlotを使って候補のリストのデザインをカスタマイズするサンプル
REST APIサジェストするリストをREST APIで非同期で取得するサンプル
Validation必須入力チェックなどのバリデーションのサンプル
Input SlotsSlotで入力ボックスのデザインをカスタマイズするサンプル
Before and After Slots候補リストにヘッダー・フッターを付けるサンプル
No search入力がないリスト選択のサンプル
Disabled Itemsリストの一部のアイテムを非活性にするサンプル
Open at the beginning常に候補のリストを表示するサンプル
Search text controlJavaScriptで候補リストのアイテムを選択するサンプル
Menu default positionリストの表示位置を変更するサンプル

さいごに

どのライブラリも簡単に導入できて、どれを利用しようか迷ってしまいますね!

Vue.jsでは、ライブラリを使うことで簡単にサジェスト入力を実現できます

是非、試してみてください!

こちらの記事もオススメ!

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア