JavaScriptを使わずにautocomplete（自動補完）を実装する

この記事は SUPER STUDIO Advent Calendar 2022 21日目の記事です。

---

社内向けシステムはRailsで作るに限りますね！
あと、社内システムはJavaScriptを書かないに限りますね！

ずっとJSを1文字も書かずに開発を進めてきて、今回、従業員名の検索ボックスを作る必要があって、自動補完とかもしたかったのでさすがにこれはJS書かないと厳しいだろうという話になったのですが、HTML5のautocomplete属性を使って乗り切ったので、その話です。

ちなみに対応ブラウザは確認してませんが、社内システムなので最新バージョンのChromeで動けば問題なし！

とても簡単で、inputタグでautocomplete属性にonを指定して、list属性で対応するdatalistタグのidを指定すればOK。

こんな感じ（slimで書いてます）で書けば、

= form.label '担当者'
= form.text_field :employee_id, value: @task.employee.present? ? "#{@task.employee.name} (ID: #{@task.employee.id})" : nil, autocomplete: "on", list: "employees"
datalist#employees
  - @employees.each do |employee|
    option value="#{employee.name} (ID: #{employee.id})" #{employee.full_name_hiragana}

こうなって、

で、候補を選ぶと、

こうなる。素晴らしい。
ご覧のとおり、valueの中身とタグの中身が両方部分一致の検索対象となります。
従業員数が200人ぐらいの社内システムなら、わざわざ文字を打つたびにAjaxを走らせなくても、あらかじめHTML内に全従業員をdatalistとして用意しておいて問題ないかと。

ただ、このままだと "細川貴英 (ID: 82)" という文字列がそのまま employee_id として送られてしまうので、modelのbefore_save内とかでid部分だけを抜き出す処理を入れてあげてください。（そもそもパラメータのvalueの文字列にidが含まれてないと取れないので注意）

今回は、アプリケーションのいろんな箇所で検索ボックスを使う必要があったので、ApplicationControllerに

  def use_employee_suggestion
    @employees = Employee.all
  end

なんて用意しておいて、この検索ボックスが必要なviewに対応するcontrollerで、

before_action :use_employee_suggestion, only: %i[new edit]

とかしてみたりしました。
メリークリスマス！