Vue.jsでサジェスト入力を行う4つの方法

今回は、Vue.jsでサジェスト入力を行う方法を4つ（内1つは自作コンポーネント）紹介します。

サジェスト入力とは、入力途中に候補となるものを予測し、入力項目の下に候補として表示する機能です。Googleの検索窓で何か文字を入力すると、下に候補でてくるあれです。

スポンサーリンク

方法1 HTML5のautocomplete属性を使う

HTML5で追加されたautocomplete属性を使うと、Vue.jsでも簡単にサジェスト入力が実現できます。

<input>要素のautocomplete属性は、<input>要素に文字を入力すると、その文字を含む候補を提示して、内容を自動補完することができます。

入力候補のデータのリストをは、 同じくHTML5で追加された<datalist>を使用します。<datalist>は、 フォームの入力欄などで入力候補となるデータリストを定義します。

以下サンプルコードです。

<input type="text" name="yourarea" autocomplete="on" list="food"/>  
<datalist id="food">  
  <option v-for="n in ['ハンバーガー','てりやきバーガー','ポテト']" :key="n">{{n}}</option>
</datalist>

上記のコードで、入力欄に「バーガー」と入力すると、次のイメージのように「バーガー」の文字を含む候補が表示されます。表示された候補を矢印キーまたはマウスで選択すると、選択した候補をサジェスト入力できます。

方法2. vue-simple-suggestを使う

上で紹介したHTML5のautocomplete属性は、IOSには対応していないため、スマホ対応する必要があるサイトの場合あは、これから紹介する「vue-simple-suggest」のような
を使う必要があります。

「vue-simple-suggest」は、その名の通りVue.jsでシンプルにサジェスト入力ができるライブラリです。早速使い方を見ていきましょう。

インストール

npmまたはyarn経由でライブラリをインストールします。

# npmの場合
npm install --save vue-simple-suggest
# yarnの場合
yarn add vue-simple-suggest

上記以外に、Unpkg等でもライブラリは公開されています。詳しくは以下のリンク参照。
https://www.npmjs.com/package/vue-simple-suggest#installation

使う

以下が、「vue-simple-suggest」を使ったサンプルコードです。

<template>
	<vue-simple-suggest
	  v-model="selected"
	  :list="simpleSuggestionList"
	  :filter-by-query="true">
	</vue-simple-suggest>
</template>

<script>
import VueSimpleSuggest from 'vue-simple-suggest'
import 'vue-simple-suggest/dist/styles.css' // Using a css-loader

export default {
  components: {
    VueSimpleSuggest
  },
  data() {
    return {
      selected: null,
      simpleSuggestionList: ['ハンバーガー','てりやきバーガー','ポテト']
    }
  }
}
</script>

実行結果

上のコードを実行すると、次のイメージのような実行結果になります。若干サジェスト入力のポップアップの反応が悪いですが、「vue-simple-suggest」でもキーワードを含む候補が、サジェスト入力できます。

スポンサーリンク

方法3. vue-cool-selectを使う

「vue-cool-select」も、Vue.jsでサジェスト入力を可能するライブラリです。実際の動きは、デモサイトで確認できます。

では早速使い使い方を見ていきましょう。

インストール

npmまたはyarn経由でライブラリをインストールします。

# npmの場合
npm install --save vue-cool-select
# yarnの場合
yarn add vue-cool-select

使う

公式サイトのサンプルコードのままですが、「vue-cool-select」を使ったサンプルコードです。

<template>
  <div>
    <cool-select v-model="selected" :items="items" placeholder="Select name" />
  </div>
</template>

<script>
import { CoolSelect } from "vue-cool-select";

export default {
  components: {
    CoolSelect
  },
  data() {
    return {
      selected: null,
      items: ["Anton", "Andrey", "Sasha", "Vladimir", "Dima"]
    };
  }
};
</script>

実行結果

上のコードを実行すると、次のイメージのような実行結果になります。Coolという名前が付いているライブラリだけあって、かなり快適にサジェスト入力ができます。

方法4. vue-suggest-inputを使う

4つ目は、恐縮ながら私は作成したサジェスト入力できるvueコンポーネントです。どんな動きをするのかは、以下のGIFアニメを見てください。

インストール

npmでインストールできます。

npm i vue-suggest-input --save

シンプルなサンプル

シンプルな使い方のサンプルコードです。とにかくシンプルにすぐ使えるを目標に作ったコンポーネントで、デフォルトのcssをインポートすれば、見た目のデザインも某大手検索エンジンのように装飾しています。

<template>
  <div style="width:400px">
    <vue-suggest-input v-model="selected" :items="items"/>
  </div>
</template>
<script>
import VueSuggestInput from 'vue-suggest-input'
import 'vue-suggest-input/dist/vue-suggest-input.css'

export default {
  components: {
    VueSuggestInput
  },
  data() {
    return {
      items: ['apple','cocoa','coffee','cola'],
      selected: "",
    }
  }
}
</script>

スポンサーリンク

さいごに

今回は、Vue.jsでサジェスト入力をする為の方法を4つ紹介してきました。HTML5のautocomplete属性がIOSにも実装されれば、外部のライブラリに頼らずにサジェスト入力できるのですが、現状はスマホサイトにも対応する場合は、今回紹介した「vue-simple-suggest」や「vue-cool-select」などのVue.jsのプラグインを使う必要がありそうです。

また、今回紹介したvueコンポーネントのサンプルコードは、最もシンプルな使い方のソースです。各コンポーネントはサジェスト入力のポップアップに独自のテンプレートを表示させたり、色々表示内容をカスタマイズできます。

気になった方は、npmの公式サイトで使い方が詳しく書かれていますので、見てみてください。

• vue-simple-suggest

https://www.npmjs.com/package/vue-simple-suggest#custom-suggestion-item

• vue-cool-select

https://www.npmjs.com/package/vue-cool-select