搜索时删除前置用户

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 membersfilterThroughUsers($groupMembersSearch, $groupMembersItems);// Filter through all usersfilterThroughUsers($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>

Answer 1

分配搜索列表内部按键回调函数而不是外部。

$('.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>