質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.33%

インクリメンタルサーチ 追加したユーザーを検索結果に出さないようにしたい

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 1,059

TOMONINO

score 9

チャットアプリでユーザー検索機能にインクリメンタルサーチをつけているのですが、追加ボタンを押してチャットメンバーにユーザーを追加して、再度検索すると追加したユーザーがまた出てきます。
追加したユーザーは出てこないようにしたいのですが、その方法がわかりません。
お知恵を貸していただけたらと思います。

$(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);
  }

  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="chat-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 appendNoUser(user) {
    var html = `<div class="chat-group-user clearfix">
                  <p class="chat-group-user__name">${ user }</p>
                </div>`
    search_list.append(html);
  }

  $("#user-search-field").on("keyup", function() {
    var input = $("#user-search-field").val();
      if (input.length) {
        $.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 {
            appendNoUser("一致するユーザーはいません");
          }
        })

        .fail(function() {
          alert("ユーザー検索に失敗しました");
        })

      } else {
        $("#user-search-result").empty();
      }
  });

  $(document).on("click", ".chat-group-user__btn--add", function (){
    var member = {};
    member.id = $(this).data("user-id");
    member.name = $(this).data("user-name");
    $(this).parent().remove();
    appendMembers(member.name, member.id);
  })

  $(document).on("click", ".user-search-remove .chat-group-user__btn .chat-group-user__btn--remove .js-remove-btn", function() {
    $(this).parent().remove();
  })
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • gouf

    2019/08/21 02:20

    たとえば: 「addedMemberList = []」を新規に用意して、そこにメンバーを追記。メンバーリストを取得する処理に「except」パラメータを新設して その値として「addedMemberList」を投げるようにすれば、道筋 (= バックエンド側に処理をバトンタッチ) が見えてきませんか?

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る