"Search dialog"
Bootstrap 3.3.0 Snippet by atomixnmc

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <body> <div class="container"> <table class="table table-hover"> <thead> <tr> <th style="width: 50px">ID</th> <th>Script</th> <th>Device</th> <th>Param</th> <th>Action</th> </tr> </thead> <tbody id="myTable2"> <tr> <td>1</td> <td>[GS-ATC-search-047] 1</td> <td>Chrome</td> <td><input type="text" value="{ param: a}"></td> <td><button>Edit</button><button>Delete</button></td> </tr> <tr> <td>2</td> <td>[GS-ATC-search-047] 2</td> <td>Chrome</td> <td><input type="text" value="{ param: a}"></td> <td><button>Edit</button><button>Delete</button></td> </tr> <tr> <td>3</td> <td>[GS-ATC-search-047] 3</td> <td>Chrome</td> <td><input type="text" value="{ param: a}"></td> <td><button>Edit</button><button>Delete</button></td> </tr> <tr> <td>4</td> <td>[GS-ATC-search-047] 4</td> <td>Chrome</td> <td><input type="text" value="{ param: a}"></td> <td><button>Edit</button><button>Delete</button></td> </tr> <tr> <td> </td> <td> <select id="testChoice"> <option value="test1">Test case 1</option> <option value="test2">Test case 2</option> <option value="test3">Test case 3</option> </select> </td> <td><input type="text"></td> <td><input type="text"></td> <td><a style="display: inline-block" data-toggle="modal" href="#myModal" class="btn btn-primary"> <i class="glyphicon glyphicon-search"></i> </a> </td> </tr> </tbody> </table> <button>Add</button> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Find test cases</h4> </div> <div class="modal-body"> <div> <div> <input id="search" type="text" placeholder="Search script title.."> <select id="category"> <option value="cat1">All (10)</option> <option value="cat2">Order (5)</option> <option value="cat3">Store (1)</option> <option value="cat4">MC (2)</option> </select> <span title="Click to change condition type">Condition <button id="conditionType">And</button> </span> </div> <div> <span class="tag label label-primary">All (10)</span> <span class="tag label label-default">Order (5)</span> <span class="tag label label-default">Store (1)</span> <span class="tag label label-default">MC (2)</span> </div> <br><br> <table class="table table-hover"> <thead> <tr> <th style="width: 20%">ID</th> <th style="width: 60%">Script</th> <th style="width: 20%">Action | <input type="checkbox" id="selectAll">Select all</th> </tr> </thead> <tbody id="myTable"> <tr data-cat="cat1"> <td>1</td> <td>[GS-ATC-search-047] a</td> <td><input type="checkbox"></td> </tr> <tr data-cat="cat2"> <td>2</td> <td>[GS-ATC-search-047] b</td> <td><input type="checkbox"></td> </tr> <tr data-cat="cat1"> <td>3</td> <td>[GS-ATC-search-047] a</td> <td><input type="checkbox"></td> </tr> <tr data-cat="cat2"> <td>4</td> <td>[GS-ATC-search-047] d</td> <td><input type="checkbox"></td> </tr> <tr data-cat="cat1"> <td>5</td> <td>[GS-ATC-search-047] b</td> <td><input type="checkbox"></td> </tr> </tbody> </table> </div> <div> <h4>Batch Action</h4> <div> Device <select id="device_batch"> <option value="d1">Chrome</option> <option value="d2">Firefox</option> </select> </div> Param <select id="param_batch"> <option value="p1">x param:1 </option> <option value="p2">x param:1 </option> </select> <div> </div> </div> </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> <a href="#" class="btn btn-primary">Add</a> </div> </div> </div> </div> </div> </body>
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; }
$(document).ready(function(){ $("#search").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); $("#category").on("change", function() { var value = $(this).val().toLowerCase(); console.log("Change" , value); $("#myTable tr").filter(function() { var thisRow = $(this); var hasCat = thisRow.attr('data-cat').toLowerCase() == value; console.log(hasCat); $(this).toggle(hasCat); }); }); $("#conditionType").click(function(){ if ($("#conditionType").text()=="And") { $("#conditionType").text("Or"); } else { $("#conditionType").text("And"); } }); $(".tag").click(function(){ if ($(this).hasClass("label-primary")){ $(this).addClass("label-default"); $(this).removeClass("label-primary"); } else { $(this).removeClass("label-default"); $(this).addClass("label-primary"); } }); $("#myTable checkbox").on("change", function(){ }); $("#selectAll").on("change", function(){ console.log("Change"); var isSelectAllChecked = $(this).is(":checked"); $("#myTable [type=checkbox]").each(function (){ $(this).prop('checked', isSelectAllChecked); }); }); });

Related: See More

Argon Design System
Awesome Search Box
Carousel with Search
Bootstrap 4 search Bar

Questions / Comments: