vue-simple-suggestでサジェスト機能を実装する方法

vue-simple-suggestでテキスト入力候補を表示するサジェスト機能を実装する方法を紹介します。

vue-simple-suggestのインストール・設定

サジェスト機能を実装するためにvue-simple-suggestをインストールします。

1	$ npm install --save vue-simple-suggest

vue-simple-suggestを使用するためにplugins配下にvue-simple-suggest.jsファイルを生成して、componentで使えるようにしておきます。

・plugins/vue-simple-suggest.js

import Vue from 'vue'

import VueSimpleSuggest from 'vue-simple-suggest'

Vue.component('VueSimpleSuggest', VueSimpleSuggest)

nuxt.config.jsのpluginsに作成したファイルのパスを追記します。

・nuxt.config.js

...

plugins: [

// Doc: https://github.com/KazanExpress/vue-simple-suggest

{ src: '@/plugins/vue-simple-suggest.js' }

...

vue-simple-suggestでサジェスト機能を実装

実際にvue-simple-suggestでサジェスト機能を実装していきます。まずはサジェストを表示するための検索機能のHTMLを書いていきます。

今回はinputに入力するとサジェスト候補に一致したキーワードがinputの下に表示されるように実装します。

入力するクエリによって表示するサジェストをフィルタリングするためにfilter-by-queryオプションをtrueにしています。表示させるサジェストの最大候補数なども変更できるので、詳しくはこちらの公式を参考にしてください。

参考：https://github.com/KazanExpress/vue-simple-suggest#emitted-events

入力候補はdivタグ内のspanタグのsuggestionに表示されます。クリックするとinputに表示されます。

・components/search.vue

<client-only>

<VueSimpleSuggest

v-model="searchQuery"

:list="getSuggestionLists"

:filter-by-query="true"

<input

v-model="searchQuery"

:name="'searchQuery'"

<span>{{ suggestion }}</span>

</div>

</VueSimpleSuggest>

</client-only>

</form>

</template>

getSuggestionListsでサジェスト候補のリストを取得しています。

あらかじめstoreにセットされたデータを使います。今回は都道府県ごとの観光カテゴリをサジェストで表示させます。

・components/search.vue

...

data () {

return {

searchQuery: ''

}

computed: {

...mapGetters('prefectures', ['prefectures']),

...mapGetters('categories', ['categories'])

methods: {

async getSuggestionLists () {

const suggestionLists = []

await this.prefectures.forEach((prefecure) => {

suggestionLists.push(prefecure.name)

this.categories.forEach((category) => {

suggestionLists.push(prefecure.name + ' ' + category.name)

})

}

return suggestionLists

}

...

実際に動かしてみると、以下のようにサジェストが表示されていることが確認できます。