Remove prepend users when searching

Question

I have a two lists and I added jQuery filter to search through users. Also once you click on user it gets removed from one list and added to another.

Everything works fine but I'm facing an issue when I'm searching through list that appended user doesn't work properly.

Let's say I removed "Denis" from first list and then it's appended to second. When I'm searching through second list, "Denis" is visible all the time even when I search something different.

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

Here is jsfiddle file: https://jsfiddle.net/chille1987/ag8dr21x/22/

Answer 1

Assign search list inside key up callback function rather than outside.

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