搜索时删除前置用户

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>

Answer 1

分配搜索列表内部按键回调函数而不是外部。$('.list div').click(function() {&nbsp; const $list = $(this).closest('.list');&nbsp; const $targetList = $('.list').not($list);&nbsp; const $user = $(this);&nbsp; // Remove user from one list and add it to another&nbsp; $($user).prependTo($targetList);&nbsp; // Animate user&nbsp;&nbsp; $($user).css({&nbsp; &nbsp; 'border': '3px solid rgba(74, 144, 226, .5)'&nbsp; });&nbsp; return setTimeout((function() {&nbsp; &nbsp; $($user).css({&nbsp; &nbsp; &nbsp; 'border': '3px solid #ffffff'&nbsp; &nbsp; });&nbsp; }), 1000);});const filterThroughUsers = (input, items) => $(input).on('keyup', function() {&nbsp; const listItems = items == 'user' ? $('.all-users div') : $('.group-members div');&nbsp; const value = this.value.toLowerCase().trim();&nbsp; $(listItems).show().filter(function() {&nbsp; &nbsp; return $(this).text().toLowerCase().trim().indexOf(value) === -1;&nbsp; }).hide();});const $groupMembersSearch = $('input.search-group-members');const $allUsersSearch = $('input.search-all-users');// Filter through group membersfilterThroughUsers($groupMembersSearch, 'member');// Filter through all usersfilterThroughUsers($allUsersSearch, 'user');.container {&nbsp; display: flex;&nbsp; justify-content: space-between;&nbsp; .left,&nbsp; .right {&nbsp; &nbsp; flex-basis: 45%;&nbsp; &nbsp; border: 1px solid gray;&nbsp; &nbsp; padding: 20px;&nbsp; &nbsp; input {&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; padding: 5px 16px;&nbsp; &nbsp; &nbsp; margin-bottom: 30px;&nbsp; &nbsp; }&nbsp; &nbsp; div {&nbsp; &nbsp; &nbsp; border: 3px solid #FFF;&nbsp; &nbsp; }&nbsp; }}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">&nbsp; <div class="left">&nbsp; &nbsp; <input type="search" placeholder='Search group members' class="search-group-members">&nbsp; &nbsp; <div class="group-members list">&nbsp; &nbsp; &nbsp; <div>Denis</div>&nbsp; &nbsp; &nbsp; <div>John</div>&nbsp; &nbsp; &nbsp; <div>Simon</div>&nbsp; &nbsp; &nbsp; <div>Elton</div>&nbsp; &nbsp; &nbsp; <div>Amelia</div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="right">&nbsp; &nbsp; <input type="search" placeholder='Search all users' class="search-all-users">&nbsp; &nbsp; <div class="all-users list">&nbsp; &nbsp; &nbsp; <div>Samantha</div>&nbsp; &nbsp; &nbsp; <div>Emily</div>&nbsp; &nbsp; &nbsp; <div>Frank</div>&nbsp; &nbsp; &nbsp; <div>Justin</div>&nbsp; &nbsp; &nbsp; <div>Roberto</div>&nbsp; &nbsp; &nbsp; <div>Rogelio</div>&nbsp; &nbsp; &nbsp; <div>Amber</div>&nbsp; &nbsp; </div>&nbsp; </div></div>