0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

chat-spaceの応用実装

Last updated at Posted at 2020-06-14

はじめに

この記事は、某プログラミングスクールに登場する、通称chat-spaceの応用実装についてまとめたものです。スクールを卒業した際に、応用実装があったことを思い出したので記事にしてみました。

早速ですが、応用実装とはどんなものかというと、グループに追加したユーザーを検索してもでないようにするというものです。
画面収録 2020-06-14 22.54.10.mov.gif

この機能の動作の流れといたしましては。

① キーワード(input)を入力する。

② イベントが発生した際に、チャットメンバーに表示されているユーザーのidを配列(ids)で取得

③ あとは、Ajax通信の際にinputとidsを渡し、idsを含まないユーザを検索するだけです。

以上のことをソースコードで記述すると、次の通りになります(変更した部分だけ表示)。

 let input = $("#user-search-field").val();
    let ids = [];
    $.each( $(".chat-group-user").find("input"), function(key,value){
      ids.push(  $(value).attr("value") );
    })
    $.ajax({
      type: "GET",
      url: "/users",
      data: { keyword: input,ids: ids },
      dataType: "json"
    })
 def index
    @users = User.search(params[:keyword], params[:ids])
    respond_to do |format|
      format.html
      format.json
    end
end
  def self.search(input, ids)
    return nil if input == ""
    User.where(['name LIKE ?', "%#{input}%"] ).where.not(id: ids).limit(10)
  end
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?