Vue.js+LaravelでAutoCompleteを自作【その1】

WEBシステムで入力フォームを作っている際に必ずと言ってもいいほど必要になるの「AutoComplete(Suggest)」の機能です。

私は今までjQueryを利用してAutoComplete(Suggest)の機能を実装していたのですが、最近Vue.jsを触りはじめたのでそろそろjQueryから脱却したいなと思っていました。

まずHTML5のDatalistを利用することで、比較的簡単に実装することができたため試してみました。

本記事の内容

AutoCompleteを自作した理由
進め方
最終的なページ
AutoComplete基本部分の作成
解説
第1回まとめ

AutoCompleteを自作した理由

先ほどのDatalistを利用した方法だとブラウザや機種などで幾つか制限があります（下のMEMO参照)。

そのため、OSやブラウザの種類などのシステムの要件によっては使えないパターンも発生してしまうので、Datalist以外の方法でもAutoCompleteを実装でないか考えておりました。

Vue.jsライブラリとして「vue-simple-suggest」や「vue-cool-select」なども試してみたのですが、今回は私自身のVue.jsの学習も兼ねてVue.js+LaravelでAutoCompleteを自作してみることにしました！！

AutoCompleteを作成するには、Vue.jsとJavascriptのイベントなどの動きを理解しないと作れません。Vue.js初心者の学習にもオススメです。

私もVue.jsを触りはじめて２ヶ月程度の初心者ですがかなり理解が深まった気がします。

具体的にはHTML5に対応しているブラウザ以外は動作しません。また、iPhoneの場合にはブラウザ問わず(Safari/Chrome)動作しないとの情報がありますので注意してください。

進め方

今回は学習もかねているため、段階的に機能を追加していきたいと思います。かなり長くなったため全4回に記事を分けて解説していきたいと思います、

以下の流れで作っていきます。

第１回：AutoComplete基本部分の作成
- 事前データ準備(テストデータ準備＋Ajax用の API作成)
- Vueコンポーネと作成
- Ajaxでデータ取得
- 結果をサジェストリスト表示
- アイテムクリックで選択
第２回：サジェストリストのフォーカス表示機能の追加
- 上下などのキーボード操作でのフォーカス移動
- マウスオーバでのフォーカス表示、など
第３回：サジェストにマッチした文字の強調表示
第４回：Laravelから再利用がしやすいようにする
- Laravelから再利用しやすいようにコンポーネント化する

最終的なページ

最終的に完成したページとしては以下のようになります。

サジェストはもちろんですが、各種キーボードでの操作（上や下などを押した際の動作）や入力文字にマッチした文字の強調まで行ないます。

またLaravelからパーツとして使いやすくするために、VueコンポーネントへLaravelブレードかパラメータ(名前とか)を渡せるようにします。（例えばFormでのnameの値やajaxのurlなど）

もう少し改善できるとは思いますがとりあえずの完成形としています。動画を以下にのせておきます。

AutoComplete基本部分の作成

第１回の完成ページ

はじめに第１回が終わった時に出来上がるページについて確認しておきます。ポイントは以下です。

フォームに入力された文字列でAPIへ問合せしてサジェストする値を取得
サジェストされた結果をリアルタイムでリスト表示
サジェストされたアイテムをクリックすることで選択したアイテムがフォームにセットされる

まだこの段階ではキーボードの上下やEnterを押したりマウスオーバーしてもフォーカス表示などはされません。

テストデータの準備

まずはお決まりの事前に実際にテストで利用するデータを準備します。以下の記事にあるテストデータの準備まで行っておいてください。

こんな感じのダミーデータが入っていればOKです。

Ajax用のAPIを作成

Ajax用のAPIを作成します。/search/emailでアクセスした際にemailで検索したデータをJson形式で最大5件返すものを作成します。

routes/web.phpに以下を追記してルートを追加します。(合わせてページ表示するためのルート追加してます)

// ページ表示用
Route::resource('/emp', 'EmployeeController');

// API用
Route::get('/search/email', 'EmployeeController@search_email')->name('search.email');

app/Http/Controllers/EmployeeController.phpファイルに追加します。

// API用
    public function search_email(Request $request)
    {
        $searchquery = $request->input('query');
        $data = Employee::where('email', 'like', '%' . $searchquery . '%')->limit(5)->get();
        return response()->json($data);
    }

// ページ表示用
    public function create()
    {
        return view('create');
    }

実際にURLへアクセスして正しく値が取れるかを確認します。私の環境では以下のURLです。http://localhost:8003/search/email?query=ishi

AutoCompleteコンポーネントの作成

それではいよいよ本題のVueコンポーネントの作成を行っていきます。まずは以下の場所に以下のファイルを作成します。

ファイルは以下の内容を記載します。

resources/js/components/AutoCompleteComponent.vue

<template>
    <div>
        <input
            type="text"
            placeholder="what are you looking for?"
            v-model="query"
            class="form-control"
            autocomplete="off"
            name="email"
            @input="getSuggestionList"
        />
        <div class="panel-footer" v-if="results.length && open">
            <ul class="list-group">
                <li
                    v-for="(result, index) in results"
                    v-bind:key="result.index"
                    class="list-group-item list-group-item-action"
                    @click="suggestionClick(index)"
                    v-text="result.email"
                ></li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            query: "",
            results: [],
            open: false,
            current: 0
        };
    },

    methods: {
        getSuggestionList() {
            this.results = [];
            if (this.query.length >= 1) {
                axios
                    .get("/search/email", {
                        params: { query: this.query }
                    })
                    .then(Response => {
                        this.results = Response.data;
                        if (this.results) {
                            this.open = true;
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },

        suggestionClick(index) {
            this.query = this.results[index].email;
            this.open = false;
            this.current = 0;
            this.results = this.results[index];
        }
    }
};
</script>

続いて[resources/js/app.js]に作成したファイルパスを登録します。

Vue.component(
    "auto-complete-component",
    require("./components/AutoCompleteComponent.vue").default
);

Laravel側の準備

Laravelのビューとしてブレードファイルを作成します。/emp/createでページを表示するようにします。

resources/views/create.blade.php

@extends('layouts.app')

@section('content')

<div class="container">

    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Test AutoCoｍplete Vue.js</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('emp.store') }}">
                        @csrf
                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">E-mail</label>
                            <div class="col-md-6">
                                <auto-complete-component/>
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <div class="col-md-8 offset-md-4">
                                <input type="text" name="dummy" style="display:none;">
                                <button type="submit" class="btn btn-primary">
                                    登録
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

動作確認

それでは動作を確認してみましょう。npm run devを実施してからアクセスして下さい。前にあったようにサジェスト表示がされれば成功です。

解説

それでは解説していきます。今回はAjaxでサジェストするデータ取得している部分とサジェスト結果をv-forで表示している部分がポイントになります。

Vueコンポーネントの呼び出し

create.blade.phpファイル内にある以下の行でVueコンポーネントを呼び出ししてます。特にこの時点では呼び出しだけしてます。

<auto-complete-component/>

Ajaxでのデータ取得

続いてAutoCompleteComponent.vue側の解説に進みます。

はじめにAjaxでデータを取得している部分について解説します。これはAxiosを利用したことがある方であれば比較的簡単に理解ができるかと思います。Axiosめちゃ便利です。

フォームに「何か」が入力されたタイミングでgetSuggestionListメソッドを呼び出し（@input=”getSuggestionList”の部分）
getSuggestionListメソッドではaxiosを使ってurl(search/email)に対して通信を実施(queryで検索)
2文字目の入力で問合せを発動(if (this.query.length > 1)の部分)
結果をresultsに格納

サジェストリストをv-forで表示

Ajaxで取得したサジェスト結果をv-forを使って<li>のアイテムとして表示しています。このタイミングでは表示するだけのものです。

current変数については表示を制御するために利用しますが次回説明します。

openでサジェストリストの表示/非表示をコントロール

サジェスト結果のリスト表示についてはopenという変数を用意して制御しています。具体的には以下のような動きです。

openがTrue、かつ結果(results)がある時にサジェストリストが表示されるようにする
<div class=”panel-footer” v-if=”results.length && open”>
ページを開いた時はリストは開かせたくないのでopen=falseの状態
サジェスト結果resultsが取得できた時にサはジェストリストを開きたいのでopen=trueへ変更
if (this.results) {
　this.open = true;
}
suggestionClickした時にはサジェストリストを閉じたいのでopen=falseへ変更