はじめに

TailwindCSS とか新しいフレームワーク使いたいけど、
まだまだ、Bootstrap のほうが慣れてるよっていう状況です

そこから選択肢をいろいろ調査しました

事前調査

最近はHTML5で登場したdatalistを使うようになっている
- Bootstrapでもdatalistを一応サポートしている風な雰囲気
Bootstrap-3-Typeaheadという以前からあるライブラリが存在する

というところまで

参考資料

事前準備

対象となるModelは実装済み

手順

サーバーのレスポンス

とりあえずJSON形式で返しておけばなんとかなる

例

class AutocompleteController extends Controller
{
    public function __invoke(Request $request)
    {
        // 入力した文字を受け取って
        $query = $request->get('query');
        // 検索
        $data = empty($query) ?
            User::all() :
            User::where('name', 'LIKE', '%'. $query. '%')->get();
        // JSONで返す
        return response()->json($data);
    }
}

フロントの動作

datalistを利用する場合はonkeypressイベントとかにOptionを更新または作り直す処理を追加する

Bootstrap-3-Typeaheadの場合

bladeの例

$('#input').typeahead({
    minLength: -1, // 空文字でも検索できるように
    source: (query, process) => 
        $.get("{{ route('autocomplete') }}", 
            { query: query },
            (data) => process(data)),
});

おまけ

inputのautocomplete属性

これはブラウザがいままでの入力を元に補完するための属性

決まったルールもあるっぽい

<!-- メールアドレス -->
<input type="text" autocomplete="email">

<!-- 氏名 -->
<input type="text" autocomplete="username">

<!-- 
    その他、たくさんある
 -->

おわりに

そもそもスマホの普及により、この手のAutocompleteが使われなくなっている
しかし、パソコンでアクセスすることが多いサービスの場合は便利