【本日の学習内容：共同開発(検索機能)】
インクリメントサーチの実装に取り組みました。
記事を参考に以下の手順で実装を進めたのですが、
５で取得したdataをどう活用すれば良いかわからず詰まってしまいました。
1.text/index.html.erbにフォームを作成
<form class="search-form mx-auto mb-3">
<i class="fa fa-search search-icon"></i>
<%= text_field_tag :title,"", class: "form-control js-text-field", placeholder: "教材を探す"%>
</form>
2.検索窓に入力した値を取得して、そのデータをRails側にリクエストを送信
app/javascript/packs/search.js
$(function () {
$('.js-text-field').on('keyup', function () {
var title = $.trim($(this).val());
$.ajax({
type: 'GET',
url: 'texts/searches',
data: { title: title },
dataType: 'json'
})
});
});
3.Messages::SearchesControllerのindexアクションが動くようにルーティングを記述
namespace :texts do
resources :searches, only: :index, defaults: { format: :json }
end
4.リクエストを送信されたデータを受け取るcontrollers/texts/searches_controller.rbを作成し、
indexアクションに「検索処理のコード」と「検索結果のデータをレスポンスするコード」を記述
class Texts::SearchesController < ApplicationController
def index
@texts = Text.where('title LIKE(?)' , "%#{params[:title]}%")
respond_to do |format|
format.html {redirect_to :root }
format.json {render json: @texts}
end
end
5.Controllerからレスポンスを送信されたデータを受け取って、JavaScript(jQuery)で受け取ったデータを元にタイトル一覧に反映させる
app/javascript/packs/search.js
$(function () {
$('.js-text_field').on('keyup', function () {
var title = $.trim($(this).val());
$.ajax({
type: 'GET',
url: '/messages/searches',
data: ("title=" + title),
dataType: 'json'
})
// 以下を追加
.done(function (data) {
console.log(data); // dataを確認する
})
});
});
引き続き取り組みます！
