railsでviewのtext_fieldにdatalistを表示させる

datalistについて

datalist 要素 - HTML | MDN

View

実装

• text_fieldタグにlist:オプションを追加してdatalistのidを指定する
• datalistタグを追加する
• datalistの候補値をoptionとして指定する

xxx.html.erb

<%= form.text_field :name, id: :user_name, list: 'list-name' %>
<datalist id="list-name">
  <option value="akasaka">
  <option value="akatsuka">
  <option value="akabane">
</datalist>

動作

テキストフィールドが空欄の場合はすべての値が候補として表示される。

テキストフィールドに値が入力されてる場合は一致する値のみ候補として表示される。