Usando Bootstrap podemos buscar o filtrar el resultado requerido que queremos que se muestre al buscar un elemento/palabra en particular en nuestro sitio web. Aunque Bootstrap no nos proporciona un componente o utilidad que permita filtrar elementos. Para ese propósito, tenemos que usar jQuery para filtrar o buscar.
En este artículo, discutiremos algunos métodos de filtrado que podemos usar en nuestra aplicación.
Tabla de filtro de Bootstrap: puede filtrar los elementos de la tabla usando Bootstrap y jQuery juntos en el cuerpo de la tabla, excluyendo los encabezados de la tabla. Se puede realizar un filtrado que no distingue entre mayúsculas y minúsculas.
Ejemplo: El siguiente código se ha implementado en la tabla para filtrar elementos.
HTML
<!DOCTYPE html> <html> <head> <title>Filters in Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--link of Bootstrap 4 css--> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- links of Bootstrap 4 JavaScript --> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h2>Bootstrap filter for table</h2> <input type="text" class="form-control" placeholder="Search Here" id="txtInputTable"> <br> <table class="table table-bordered"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Email</th> <th>Phone No.</th> </tr> </thead> <tbody id="tableDetails"> <tr> <td>101</td> <td>Ram</td> <td>ram@abc.com</td> <td>8541236548</td> </tr> <tr> <td>102</td> <td>Manish</td> <td>manish@abc.com</td> <td>2354678951</td> </tr> <tr> <td>104</td> <td>Rahul</td> <td>rahul@abc.com</td> <td>5789632569</td> </tr> <tr> <td>105</td> <td>Kirti</td> <td>kirti@abc.com</td> <td>5846325968</td> </tr> </tbody> </table> </div> <!-- For searching purpose --> <script> $(document).ready(function () { $("#txtInputTable").on("keyup", function () { var value = $(this).val().toLowerCase(); $("#tableDetails tr").filter(function () { $(this).toggle($(this).text() .toLowerCase().indexOf(value) > -1) }); }); }); </script> </body> </html>
Producción:
Bootstrap filtra cualquier cosa: podemos filtrar cualquier cosa que esté presente en nuestro sitio web, ya sea una tabla, una lista, un botón, un párrafo o cualquier cosa.
Ejemplo: El siguiente código ha sido implementado para filtrar todo lo que está presente en su sitio web.
HTML
<!DOCTYPE html> <html> <head> <title>Filters in Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--link of Bootstrap 4 css--> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- links of Bootstrap 4 JavaScript --> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h2>Bootstrap filter for anything</h2> <input class="form-control" id="txtInputAnything" type="text" placeholder="Search Here"> <div id="myWeb" class="mt-3"> <p>Type a paragraph which you want to find</p> <button class="btn btn-secondary">First button</button> <div>Search anything you want</div> <p>Another paragraph.</p> <button class="btn btn-danger">Another button</button> </div> </div> <!-- For searching purpose --> <script> $(document).ready(function () { $("#txtInputAnything").on("keyup", function () { var value = $(this).val().toLowerCase(); $("#myWeb *").filter(function () { $(this).toggle($(this).text() .toLowerCase().indexOf(value) > -1) }); }); }); </script> </body> </html>
Producción:
Lista de filtros Bootstrap: es similar al filtrado de tablas y funciona en listas. Por lo general, no hay diferencia entre el filtrado de tablas y el filtrado de listas.
Ejemplo: El siguiente código se ha implementado en la lista para filtrar elementos.
HTML
<!DOCTYPE html> <html> <head> <title>Filters in Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--link of Bootstrap 4 css--> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <!-- links of Bootstrap 4 JavaScript --> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h2>Bootstrap filter for list</h2> <input class="form-control" id="txtInputList" type="text" placeholder="Search Here"> <br> <ul class="list-group" id="myList"> <li class="list-group-item">First list item</li> <li class="list-group-item">Second list item</li> <li class="list-group-item">Third list item</li> <li class="list-group-item">Fourth list item</li> <li class="list-group-item">Sixth list item</li> <li class="list-group-item">Seventh list item</li> </ul> </div> <!-- For searching purpose --> <script> $(document).ready(function () { $("#txtInputList").on("keyup", function () { var value = $(this).val().toLowerCase(); $("#myList li").filter(function () { $(this).toggle($(this).text() .toLowerCase().indexOf(value) > -1) }); }); }); </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por subodhray5221 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA