Rails ajaxで検索一致したキーワードの取得、表示まで

はじめに

Railsで特定のデータベースの一覧を取得から表示までの実装を行なったので、忘れないようにメモしておきたい。

jqueryは少し触れた程度だったので書き方やajax通信についての勉強になった。

サンプルとしてUserテーブルを準備

カラム名	データ型
id	integer
name	string
created_at	datetime
updated_at	datetime

{:id=>1, :name=>"山田"}
{:id=>2, :name=>"太郎"}

一覧表示する箇所

 <%= f.text_field :name, class: 'form user-match', required: true %> 
 <p class="search-attention"></p>

#API作成

def index
    keyword = params[:keyword]
    @users = User.where(['name = ?', keyword])
                     .page(params[:page] || 1).per(50)
                     .order(:id)
    render json: @user
  end

ここでは完全一致したものを取得するようにしている。
ルーティングでパスを指定する。
params[:keyword]に太郎という値を渡すと次のようなものが返ってくる。

{:id=>2, :name=>"太郎"}

山田の場合だと

{:id=>1, :name=>"山田"}

#ajaxの実装
user_match.js.erbを作成。

api_match = function (selector, path) {
  $(selector).change(function() {
    const user_name = $(this).val();
    $.ajax({
      url: `指定したurl` + path,
      dataType: "json",      #サーバから返されるデータの型を指定
      data: {keyword: user_name}
    })
    .done(function (data) {  #値が帰ってきたとき
      $(selector).next(".search-attention").empty(); #他のclass(search-attention)と被らないように
      if ($.trim(data)){ 　#dataが空じゃない時
        $(selector).next(".search-attention").append("<p>" + data[0].name + "</p>");
      };
    });
  });
};

$(window).on("load", function () {　# classにevent付与
  api_match(".user-match", 指定したpath)
});

ここで一つはまってしまったのがchangeメソッドを用いているがfunctionを書くことを忘れておりエラーが出ていたので気をつけたい。

これでtext_fieldに検索したいキーワードを入力をすると非同期通信での取得、表示がされる。