要创建过滤器列表,请使用Bootstrap中的.list-group类。
您可以尝试运行以下代码来创建过滤器列表-
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class = "container"> <h2>Tutorials</h2> <input class="form-control" id="demo" type="text" placeholder="Search here..."> <br> <ul class = "list-group" id = "newList"> <li class = "list-group-item">Java</li> <li class = "list-group-item">jQuery</li> <li class = "list-group-item">PHP</li> <li class = "list-group-item">AngularJS</li> <li class = "list-group-item">Ruby</li> <li class = "list-group-item">C</li> </ul> </div> <script> $(document).ready(function(){ $("#demo").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#newList li").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> </body> </html>