Laravel10でAutocomplete(自動補完)させる時に調べたこと

はじめに

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

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

事前調査

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

というところまで

参考資料

事前準備

• 対象となるModelは実装済み

手順

1. サーバーのレスポンス

   とりあえず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);
       }
   }
   

2. フロントの動作

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

   2. 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が使われなくなっている
しかし、パソコンでアクセスすることが多いサービスの場合は便利