Ruby on RailsでAjaxによるユーザー検索機能を実装する

WEBアプリケーションでは、emailやユーザーIDをキーワードとした検索機能によりフォローを行うことができます。

WEBアプリケーションのフレームワークで有名な「Ruby on Rails」は、かつてTwitterなどが採用しており、SNSを作るのであれば選択肢の一つに挙げられます。

そこで、「Ruby on Rails」によるAjaxによるユーザー検索機能を作成ました。

route.rbで窓口を作成

今回は、groupコントローラーとuserテーブルが存在する想定で実装します。

groupコントローラーへユーザーをグループ登録するためにユーザーテーブルにあるuseridの検索を行います。

routes.rbには、resourcesへ:groupを指定し、getには「search」を指定してみましょう。

  resources :group do
    collection do
      get 'search'
    end
  end

グループコントローラでユーザーIDを検索

routes.rbでは「get search」を記述したので、グループコントローラである「GroupController.rb」へsearchを宣言します。

  def search
    @users = User.find_by(userid:params[:keyword])
    render json: @users
  end

「search」内では、「find_by」でAjaxで渡されるパラメータを元にユーザーIDを検索します。

検索結果は、jsonで通信するために「render」を使いjsonの結果を返します。

なお、ユーザー検索を曖昧検査にしたい場合は、次のように書くことで解決させることができます。

  def search
    @users = User.where('userid LIKE(?)', "%#{params[:keyword]}%")
    render json: @users
  end

View側で検索と検索結果を表示する

コントローラーまで書き終わると、いよいよViewを作成していきます。

View側の実装は、Ajaxの内容を把握するために質素に作成してみました。

<p>検索</p>
<input id="form" type="form" placeholder="ユーザーid" />
<p>検索結果<p/>
<ul id="result"></ul>

構造は簡単で、テキストフォームへ検索したいユーザーIDを入力後、検索結果をid「result」へ反映するだけです。

group.jsでjsonフォーマットでAjaxする

今回のポイントとなる「group.js」のAjax処理はこちらとなります。

$(document).on('turbolinks:load', function(){
    $(document).on('keyup', '#form', function(e){
    e.preventDefault();
    var input = $.trim($(this).val());
    $.ajax({
      url: '/group/search',
      type: 'GET',
      data: ('keyword=' + input),
      processData: false,
      contentType: false,
      dataType: 'json'
    })

    .done(function(data){
      $('#result').find('li').remove();
      $(data).each(function(i, user){
        $('#result').append('<li>' + user.userid + '</li>')
      });
    })
  });
});

var inputには、trimで空白が除外されたテキストボックスの値が入ります。

「$.ajax」によりroutes.rbで記述した「group」と「search」を「url: ‘/gropu/search」として記述し、typeは「GET」とします。

これで最低限のAjax処理が完了します。

コントローラ側では、paramsを「keyword」として記述しているため、dataも「’keyword=’ + input」と記述します。

あとは、dataTypeを「json」とするだけでAjax通信が可能です。

コントローラー側で取得した「userid」は「.done」にて「li」タグで出力されます。

ユーザー名を表示させたい場合は「'<li>’ + user.username + ‘/’ + user.userid + ‘</li>’」とすることで表示可能です。