javascript - 搜索时删除前置用户

Question

我有两个列表，我添加了 jQuery 过滤器来搜索用户。此外，一旦您点击用户，它就会从一个列表中删除并添加到另一个列表中。

一切正常，但当我搜索附加用户无法正常工作的列表时，我遇到了一个问题。

假设我从第一个列表中删除了“Denis”，然后将其附加到第二个列表中。当我搜索第二个列表时，“Denis”始终可见，即使我搜索不同的内容也是如此。

$('.list div').click(function() {
  const $list = $(this).closest('.list');
  const $targetList = $('.list').not($list);
  const $user = $(this);
  // Remove user from one list and add it to another
  $($user).prependTo($targetList);
  // Animate user 
  $($user).css({
    'border': '3px solid rgba(74, 144, 226, .5)'
  });
  return setTimeout((function() {
    $($user).css({
      'border': '3px solid #ffffff'
    });
  }), 1000);
});

const filterThroughUsers = (input, listItems) => $(input).on('keyup', function() {
  const value = this.value.toLowerCase().trim();
  $(listItems).show().filter(function() {
    return $(this).text().toLowerCase().trim().indexOf(value) === -1;
  }).hide();
});

const $groupMembersSearch = $('input.search-group-members');
const $groupMembersItems = $('.group-members div');
const $allUsersSearch = $('input.search-all-users');
const $allUsersItems = $('.all-users div');

// Filter through group members
filterThroughUsers($groupMembersSearch, $groupMembersItems);
// Filter through all users
filterThroughUsers($allUsersSearch, $allUsersItems);

.container {
  display: flex;
  justify-content: space-between;
  .left,
  .right {
    flex-basis: 45%;
    border: 1px solid gray;
    padding: 20px;
    input {
      width: 100%;
      padding: 5px 16px;
      margin-bottom: 30px;
    }
    div {
      border: 3px solid #FFF;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="left">
    <input type="search" placeholder='Search group members' class="search-group-members">
    <div class="group-members list">
      <div>Denis</div>
      <div>John</div>
      <div>Simon</div>
      <div>Elton</div>
      <div>Amelia</div>
    </div>
  </div>
  <div class="right">
    <input type="search" placeholder='Search all users' class="search-all-users">
    <div class="all-users list">
      <div>Samantha</div>
      <div>Emily</div>
      <div>Frank</div>
      <div>Justin</div>
      <div>Roberto</div>
      <div>Rogelio</div>
      <div>Amber</div>
    </div>
  </div>
</div>

这是 jsfiddle 文件:https://jsfiddle.net/chille1987/ag8dr21x/22/

Answer 1

在 key up 回调函数内部而不是外部分配搜索列表。

$('.list div').click(function() {
  const $list = $(this).closest('.list');
  const $targetList = $('.list').not($list);
  const $user = $(this);
  // Remove user from one list and add it to another
  $($user).prependTo($targetList);
  // Animate user 
  $($user).css({
    'border': '3px solid rgba(74, 144, 226, .5)'
  });
  return setTimeout((function() {
    $($user).css({
      'border': '3px solid #ffffff'
    });
  }), 1000);
});

const filterThroughUsers = (input, items) => $(input).on('keyup', function() {
  const listItems = items == 'user' ? $('.all-users div') : $('.group-members div');
  const value = this.value.toLowerCase().trim();
  $(listItems).show().filter(function() {
    return $(this).text().toLowerCase().trim().indexOf(value) === -1;
  }).hide();
});

const $groupMembersSearch = $('input.search-group-members');
const $allUsersSearch = $('input.search-all-users');


// Filter through group members
filterThroughUsers($groupMembersSearch, 'member');
// Filter through all users
filterThroughUsers($allUsersSearch, 'user');

.container {
  display: flex;
  justify-content: space-between;
  .left,
  .right {
    flex-basis: 45%;
    border: 1px solid gray;
    padding: 20px;
    input {
      width: 100%;
      padding: 5px 16px;
      margin-bottom: 30px;
    }
    div {
      border: 3px solid #FFF;
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="left">
    <input type="search" placeholder='Search group members' class="search-group-members">
    <div class="group-members list">
      <div>Denis</div>
      <div>John</div>
      <div>Simon</div>
      <div>Elton</div>
      <div>Amelia</div>
    </div>
  </div>
  <div class="right">
    <input type="search" placeholder='Search all users' class="search-all-users">
    <div class="all-users list">
      <div>Samantha</div>
      <div>Emily</div>
      <div>Frank</div>
      <div>Justin</div>
      <div>Roberto</div>
      <div>Rogelio</div>
      <div>Amber</div>
    </div>
  </div>
</div>