ChatSpaceインクルメンタルサーチ 実装


※※※文言作成中です。今しばらくお待ちを。※※※

```javascript:user.js

$(function() {

  var search_list = $("#user-search-result");
  var member_list = $("#member_search_result");

  function appendUsers(user) {
    var html =`<div class="chat-group-user clearfix">
                <p class="chat-group-user__name">${ user.name }</p>
                <a class="user-search-add chat-group-user__btn chat-group-user__btn--add" data-user-id="${ user.id }" data-user-name=${ user.name }>追加</a>
              </div>`

　　 search_list.append(html);
    return html;
   }

  function appendMembers(name, user_id) {
    var html =`<div class='chat-group-user clearfix js-chat-member' id='chat-group-user-8'>
                <input name='group[user_ids][]' type='hidden' value=${ user_id }>
                <p class='c hat-group-user__name'>${ name }</p>
                <a class='user-search-remove chat-group-user__btn chat-group-user__btn--remove js-remove-btn'>削除</a>
              </div>`

　　 member_list.append(html);
  }

  function appendNoUsers(info) {
    var html =`<div class="chat-group-user clearfix">
                <p class="chat-group-user__name">${ info }</p>
              </div>`

    search_list.append(html);
  }

  $(function(){
    $("#user-search-field").on("keyup", function() {
      var input = $("#user-search-field").val();
      
      $.ajax({
        type: 'GET',
        url: '/users',
        data: { keyword: input },
        dataType: 'json'
      })

      .done(function(users) {
        $("#user-search-result").empty();
          if (users.length !== 0) {
            users.forEach(function(user){
            appendUsers(user);
            });
          }
          else {
            appendNoUsers("一致するユーザーはいません");
          }
        })
      .fail(function() {
        alert('ユーザー検索に失敗しました');
      })
    });

    $(function(){
      $(document).on('click', '.user-search-add', function() {
        var name = $(this).data("user-name");
        var user_id = $(this).data("user-id");
        $(this).parent().remove();
        appendMembers(name, user_id);
      });

　    $(document).on("click", '.user-search-remove', function() {
        $(this).parent().remove();
      });
    });
  });
});
```

```haml:_form.html.haml
= form_for group do |f|
  - if group.errors.any?
    .chat-group-form__errors
      %h2= "#{group.errors.full_messages.count}件のエラーが発生しました。"
      %ul
        - group.errors.full_messages.each do |message|
          %li= message

  .chat-group-form__field
    .chat-group-form__field--left
      = f.label :name, class: 'chat-group-form__label'
    .chat-group-form__field--right
      = f.text_field :name, class: 'chat__group_name chat-group-form__input', placeholder: 'グループ名を入力してください'

  .chat-group-form__field.clearfix
    .chat-group-form__field--left
      = f.label :users, "チャットメンバーを追加", class: 'chat-group-form__label', for:'user-search-field'
    .chat-group-form__field--right
      .chat-group-form__search.clearfix
        = f.text_field :users, id: 'user-search-field', class: 'chat-group-form__input', value: '', placeholder: '追加したいユーザー名を入力してください'
      #user-search-result
        
  .chat-group-form__field.clearfix
    .chat-group-form__field--left
      = f.label :user_ids, "チャットメンバー", class: 'chat-group-form__label'

    .chat-group-form__field--right
      #chat-group-users
        - @group.users.each do |user|
          #chat-group-user-8.chat-group-user.clearfix.js-chat-member
            %input{name: 'group[user_ids][]', type: 'hidden', value: "#{ user.id }"}
            %p.chat-group-user__name
              = user.name
            %p.user-search-remove.chat-group-user__btn.chat-group-user__btn--remove.js-remove-btn 削除

      #member_search_result
  .chat-group-form__field.clearfix
    .chat-group-form__field--left
    .chat-group-form__field--right
      = f.submit class: 'chat-group-form__action-btn'
```

```ruby:users_controller.rb
class UsersController < ApplicationController

  def index
    @users = User.where('name LIKE(?) and id != ?', "%#{params[:keyword]}%" ,current_user)
    respond_to do |format|
      format.html
      format.json
   end
  end

  def edit
  end

  def update
    if current_user.update(user_params)
      redirect_to root_path
    else
      render :edit
    end
  end

  private

  def user_params
    params.require(:user).permit(:name, :email)
  end
end
```

```ruby:/view/users/index.json.builder
json.array! @users do |user|
  json.id   user.id
  json.name user.name
end
```