• トップ
  • ブログ一覧
  • Vue.jsでサジェストを実現するライブラリ3選
  • Vue.jsでサジェストを実現するライブラリ3選

    広告メディア事業部広告メディア事業部
    2020.06.04

    エンジニアになろう!

    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」がインストールできます。

    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 アプリで作り方は、以下の記事が参考になりますので、是非ご覧ください!

    featureImg2019.11.11【第1回】Vue.js 入門 〜Hello World編〜Vue.js を始めてみよう!宮田(株) ライトコード Webエンジニアの宮田です。今回、 JavaScript のフ...

    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-suggest

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

    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 等から取得したデータをサジェストに表示できます。

    サジェストを実現するライブラリ2『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-suggest

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

    少々コードが長いですが、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

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

    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 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では、ライブラリを使うことで簡単にサジェスト入力を実現できます

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

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

    featureImg2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説!JavaScriptの歴史【紆余曲折を経たプログラミン...

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...

    広告メディア事業部

    広告メディア事業部

    おすすめ記事