概要

Laravelプロジェクトを作成後にマイグレーションすると生成されるusersテーブルのデータに対して、JQuery-UIを使ってサジェスト機能を実装するサンプルです。
こんな感じの、名前を途中まで打ち込むとDBから取得したデータを元にサジェストが出るフォームを作ります。

実装

コントローラー側は名前(nameカラム)のコレクションを取得してViewに渡します。

    public function showIndex()
    {
        $user = new User();
        $suggests = $user->select(['name'])->get();

        return view('index_view', compact('suggests'));
    }

View側はinputフォームの設置とautocompleteの設定を行います。
また、jQuery-UIを読み込むため<header>タグ内にGoogle Hosted Librariesからコピペしたリンクを貼ります。

<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <script>
        $(function() {
            $('#user_name').autocomplete({
                source: @JSON($suggests).map(item => ({
                    label: item.name,
                    value: item.name,
                })),
                autoFocus: true,
                delay: 300,
                minLength: 2
            });
        });
    </script>

    <input id="user_name" type="text" />
</body>

以上です、ありがとうございました。