编辑器
运行代码 »
×
改变方向
改变主题
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.cainiaomax.com/lib/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script> <script src="https://www.cainiaomax.com/lib/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>可过滤列表</h2> <p>在输入字段中键入内容以搜索特定项目的列表：</p> <input class="form-control" id="myInput" type="text" placeholder="搜索.."> <br> <ul class="list-group" id="myList"> <li class="list-group-item">第一项</li> <li class="list-group-item">第二项</li> <li class="list-group-item">第三项</li> <li class="list-group-item">第四项</li> </ul> </div> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myList li").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> </body> </html>
×
报个问题:
你的E-mail:
网页地址:
描述:
提交
编辑器