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
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に検索したいキーワードを入力をすると非同期通信での取得、表示がされる。
Author And Source
この問題について(Rails ajaxで検索一致したキーワードの取得、表示まで), 我々は、より多くの情報をここで見つけました https://qiita.com/its532/items/e2f1663be54030e5c9c9著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .