マルチ検索、オートコンプリート機能

[amanotaro52a]

実際に試した手順 1.yarn add stimulus-autocompleteコマンドでインストール

2.自動補完部分のビューとして_search_results.html.erbを作成。

3.検索フォームとオートコンプリート部分のビューを紐付けるため、_search_form.html.erbを編集。

元々の検索フォーム

<%= search_form_for q, url: url do |f| %>
  <div class="input-group mb-3">
    <%= f.search_field :title_or_summary_content_cont, class: 'form-control', placeholder: t('defaults.search_word') %>
    <div class="input-group-append">
      <%= f.submit class: 'btn btn-primary' %>
    </div>
  </div>
<% end %>

現在の検索フォーム

<%= search_form_for q, url: url do |f| %>
  <div class="input-group mb-3" 
       data-controller="autocomplete" 
       data-autocomplete-url-value="<%= url_for(action: 'index', controller: 'diaries', only_path: true) %>">
    <%= f.search_field :title_or_summary_content_or_plant_name_or_variety_name_or_cultivation_method_or_cultivation_location_cont, 
                       class: 'form-control', 
                       placeholder: t('defaults.search_word'), 
                       data: { autocomplete_target: 'input' } %>
    <div class="input-group-append">
      <%= f.submit class: 'btn btn-success' %>
    </div>
  </div>
<% end %>

4.searchアクションとルーティングを設定しました。

[amanotaro52a]

オートコンプリート機能を断念することにしました。代わりに検索項目を分けて、より的確に日記を検索できるようにしました。