ゴール
GeekSalonの教材「7-2. 検索機能をつけてみよう」の補助教材としてindexページ上で検索結果をハイライトし、「5-1. ログイン機能をつけよう 5-2.投稿がどのユーザーからされたか表示しよう」が終了している場合にはshowページでも検索結果のハイライトを継続できるようにします
開発環境
Controller
tweetsController(ユーザーが検索した結果をshowページでも表示したい場合はusersControllerも)
Model
TweetModel(ユーザーが検索した結果をshowページでも表示したい場合はusersModelも)
テーブル
tweetsテーブル(ユーザーが検索した結果をshowページでも表示したい場合はusersテーブルも)
開発環境は上記の通りで検索させたいカラム(body)を黄色くハイライトさせています。
基本的にbodyと書いてある部分を自分の検索したい・ハイライトさせたいカラムに変更していただければ結構です！
indexページ上でのハイライト機能の実装
検索結果をハイライトにしたいviewページに以下のコードを追記してください。
app/views/tweets/index.html.erb
#省略
#追加
<%= simple_format(truncate(highlight(t.body, params[:search]),length: 100,escape: false)) %>
#ここまで
#省略
GeekSalonの教材「7-2. 検索機能をつけてみよう」で検索した文字は[:search]に格納されるように指定しているって説明されていましたよね？
なのでparams[:search]を使って検索に使用した文字を引き出しています。
また、今回の場合はこの記事で紹介した入力時の改行を表示する方法と設定した文字数をオーバーした場合に...と省略する方法の二つを併用しています。
ただ検索結果をハイライトしたいだけなら
app/views/tweets/index.html.erb
<%= highlight(t.body, params[:search]) %>
でも充分です。
コマンドプロンプト
rails g migration AddKarihozonToUsers karihozon:string
#Usersテーブルに検索した文字の保存用カラムを追加
rails db:migrate
#マイグレーションファイルを実行
検索した文字のハイライトカラーを変更
検索した文字のハイライトカラーを変更したい場合はapplication.cssに以下のコードを記入してください
app/assets/stylesheets/application.css
mark {
background-color: 変更したい色;
}
「5-1. ログイン機能をつけよう 5-2.投稿がどのユーザーからされたか表示しよう」が終了している方向けのshowページ上でのハイライト機能の実装
tweetsコントローラーにユーザーが検索した文字を保存するためのアクションを設定します。
app/model/tweets_controller
class TweetsController < ApplicationController
after_action :karihozon, only:[:index]
#省略
#追加
def karihozon
if user_signed_in?
user = current_user
if user.karihozon == nil
user.update!(karihozon:params[:search])
end
user.update!(karihozon:params[:search])
end
end
#ここまで
#省略
end