はじめに

正確な名前が分からなかったり、検索項目が多い場合サジェストは非常にUXの質を高めてくれます。

今回はTypescriptとVueで簡単にサジェストの表示を実装したのでその記録を残しておきます。

今回利用するのがこちらです。

vue-simple-suggest

vue-simple-suggestのインストール

まずはvue-simple-suggestをインストールしましょう。

yarn add vue-simple-suggest

これでインストール完了しました。

これだけだとインポートしたときに方エラーが出てしまいます。型の定義ファイルにvue-simple-suggestを宣言しておきましょう

shims-vue.d.ts
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

declare module 'vue-simple-suggest';

実装

最終的なコードは以下のようになります。

<template>
  <vue-simple-suggest
    v-model="chosen"
    :list="simpleSuggestionList"
    :filter-by-query="true"
    :styles="autoCompleteStyle"
    display-attribute="firstName"
  >
    <template slot="misc-item-above">
      <h5>ユーザー一覧</h5>
      <tr>
        <th>ファーストネーム</th>
        <th>ラストネーム</th>
      </tr>
    </template>
    <tr slot="suggestion-item" slot-scope="{ suggestion }">
      <td>{{ suggestion.firstName }}</td>
      <
td>{{ suggestion.lastName }}</td>
    </tr>
  </vue-simple-suggest>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import VueSimpleSuggest from "vue-simple-suggest";
import Button from "@/components/Atoms/Button.vue";
import "vue-simple-suggest/dist/styles.css";

@Component({
  name: "FormWIthSearch",
  components: {
    Button,
    VueSimpleSuggest
  }
})
export default class FormWIthSearch extends Vue {
  private chosen: string = "";
  private autoCompleteStyle: {} = {
    vueSimpleSuggest: "position-relative",
    inputWrapper: "",
    defaultInput: "form-control",
    suggestions: "position-absolute list-group",
    suggestItem: "list-group-item"
  };
  public simpleSuggestionList() {
    return [
      { id: 1, firstName: "タロウ", lastName: "サトウ" },
      { id: 2, firstName: "ジロウ", lastName: "イノウエ" },
      { id: 3, firstName: "サブロウ", lastName: "タナカ" }
    ];
  }
}
</script>

順番に説明します。

ボタンは別コンポーネントから読み込んでいますが普通のボタンと思っていただいて構わないです。

CSSにはBootstrapを利用しています。

各プロパティの説明です。

chosenには選択したオプションの値が入ります。今回はfirstNameを指定しています。またこの値から検索で絞り込みます。

続いてautoCompleteStyleです。テキストボックスやサジェストの下に表示されるリストのクラスを付与することができます。

CSSは通常通りお好みのやり方であてていただければ大丈夫です。

simpleSuggestionListでリストの配列を返して検索リストとして割り当てます。

これは一点注意でデフォルトの状態ではidを付けなければエラーがでます。

また私の場合はオブジェクトのfirstNameを検索対象としています。display-atributeを指定しないとデフォルトでは配列に文字列を入れなければなりません。

さらにvue-simple-suggest内でslot="misc-item-above"をタグにつけるとheaderを付けたりできます。

他にもオプションはまだまだたくさんあります。詳しくはgihubのREADMEを読んでみましょう。

まとめ

今回はVueによるサジェストの実装をしました。UXを向上させるには必須ので機能です。

このプラグインを活用して爆速でサジェストを実装しましょう。