検索時のサジェスト機能を実装する

HTMLのinput要素の機能を利用する

input要素のlist属性に、入力候補を列記したdatalistのidを指定する。autocomplete属性を"off"にしておくと、入力履歴がサジェストされなくなる。

コード例

<input type="text" autocomplete="on" list="sns">
<datalist id="sns">
    <option value="Twitter"></option>
    <option value="Instagram"></option>
    <option value="Facebook"></option>
</datalist>

参考にしたサイト

• [HTML5] autocomplete属性を用いた入力補完を実装する - YoheiM .NET
• htmlのinputに履歴でなく独自の値を候補として表示する：datalistとautocomplete="off"をうまく組み合わせる - Irohabook

実装

次のようにdatalistに投稿タイトルをすべて格納する。

search_index.html.erb

<h1>検索</h1>
<%= form_tag("/search/result", data: { turbo: false}) do %>
    <input type="text" name="word" autocomplete="off" list="post_titles">
      <datalist id="post_titles">
        <% @posts.each do |post| %>
            <option value="<%= post.title %>"></option>
            <% logger.debug(post.title) %>
        <% end %>
      </datalist>
    <input type="submit" value="検索">
<% end %>

search_controller.rb

class SearchController < ApplicationController
  def search_index
    @posts = Post.all
  end

  def result
    @posts = Post.where('title like ?', "%#{params[:word]}%")
              .or(Post.where('content like ?', "%#{params[:word]}%"))
              .order(created_at: :desc)
  end
end

問題点

検索ページを開いたタイミングで、投稿データをすべてdatalistに入れるので、データ数が多くなると処理が重くなる。