"Filter"
Bootstrap 4.1.1 Snippet by RizwanAkram

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> </head> <body> <div class="filter-wrapper"> <div> <input type="text" class="search" /> </div> <div> <ul class="first-ul"> <li><a href="#">Test 1</a></li> <li><a href="#">Test 2</a></li> <li><a href="#">Test 3</a></li> <li><a href="#">Test 4</a></li> </ul> <hr> <ul class="second-ul"> </ul> </div> <div class="selected-count">Total Selected: <span></span></div> </div> <div class="filter-wrapper"> <div> <input type="text" class="search" /> </div> <div> <ul class="first-ul"> <li><a href="#">Test 5</a></li> <li><a href="#">Test 6</a></li> <li><a href="#">Test 7</a></li> <li><a href="#">Test 8</a></li> <li><a href="#">Test 9</a></li> </ul> <hr> <ul class="second-ul"> </ul> </div> <div class="selected-count">Total Selected: <span></span></div> </div> <div class="filter-wrapper"> <div> <input type="text" class="search" /> </div> <div> <ul class="first-ul"> <li><a href="#">Test 10</a></li> <li><a href="#">Test 11</a></li> <li><a href="#">Test 12</a></li> <li><a href="#">Test 13</a></li> <li><a href="#">Test 14</a></li> <li><a href="#">Test 15</a></li> </ul> <hr> <ul class="second-ul"> </ul> </div> <div class="selected-count">Total Selected: <span></span></div> </div> </body> </html>
.filter-wrapper { float: left; margin: 20px; } .filter-wrapper .selected-count {display: none;}
$(function(){ $(document).on('keyup', '.filter-wrapper .search', function(){ var $par = $(this).parents('.filter-wrapper:first'); var val = $(this).val().toLowerCase(); $par.find('.first-ul li a').each(function(){ $(this).parent().show(); if($(this).text().toLowerCase().indexOf(val) < 0) { $(this).parent().hide(); } }); }); $(document).on('click', '.first-ul li a', function(e){ e.preventDefault(); var $par = $(this).parents('.filter-wrapper:first'); var clone = $(this).parent().clone(); $par.find('.second-ul').append(clone); $(this).parent().remove(); reinit_counter(); }); $(document).on('click', '.second-ul li a', function(e){ e.preventDefault(); var $par = $(this).parents('.filter-wrapper:first'); var clone = $(this).parent().clone(); $par.find('.first-ul').append(clone); $(this).parent().remove(); reinit_counter(); }); reinit_counter(); }); // this function will reinit the counter function reinit_counter() { $('.filter-wrapper').each(function(){ var count = $(this).find('.second-ul li a').length; $(this).find('.selected-count span').text(count); if(count) { $(this).find('.selected-count').show(); }else{ $(this).find('.selected-count').hide(); } }); }

Related: See More

Vue Argon Design System
Filter elements, sidebar filter panel bootstrap 4
Easy Table Filter
Panel Tables with Filter

Questions / Comments: