1 <!--菜单搜索功能--> 2 <!--先写静态页面--> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="utf-8"> 7 <title>菜单搜索功能</title> 8 <style> 9 * { 10 box-sizing: border-box; 11 } 12 .container{ 13 padding:10px; 14 15 16 17 } 18 .dnav{ 19 float:left; 20 width:30%; 21 height:500px; 22 padding:5px; 23 background:grey; 24 25 } 26 .dnav ul{ 27 list-style-type:none; 28 margin:10px; 29 padding:0px; 30 } 31 .dnav ul li{ 32 width:80px; 33 height:20px; 34 35 } 36 .dnav ul li a{ 37 backgrxound-color: #f6f6f6; 38 padding: 10px; 39 margin:20px; 40 text-decoration: none; 41 font-size: 18px; 42 color: black; 43 display: block 44 45 } 46 .dnav ul li a:hover{ 47 color: white; 48 49 50 } 51 .dnav input{ 52 width: 100%; 53 font-size: 18px; 54 padding: 11px; 55 border:1px solid #ddd; 56 } 57 .content{ 58 float:left; 59 width:70%; 60 61 padding:5px; 62 height:500px; 63 background:lightgrey; 64 65 } 66 67 68 </style> 69 </head> 70 <body> 71 <div class="container"> 72 <!--左右布局的实例--> 73 <div class="dnav"> 74 <nav class="nav"> 75 <h2>导航菜单<h2> 76 <input placeholder="请输入关键字" id="mysearch" onkeyup="search()"> 77 <ul> 78 <li><a href="#">HTML</a></li> 79 <li><a href="#">CSS</a></li> 80 <li><a href="#">JavaScript</a></li> 81 <li><a href="#">jQuery</a></li> 82 <li><a href="#">bootstrap</a></li> 83 <li><a href="#">angular</a></li> 84 <li><a href="#">vue</a></li> 85 <li><a href="#">node.js</a></li> 86 </ul> 87 </nav> 88 </div> 89 <div class="content"> 90 前端要求学习的各种知识 内容 91 </div> 92 </div> 93 <script> //功能：主要是过滤，通过转换为大写toUpperCase,然后用indexOff来查询返回字符串位子，无就返回-1 94 function search(){ 95 var input = document.getElementById("mysearch").value; 96 var li= document.getElementsByTagName("li"); 97 var fliter=input.toUpperCase(); 98 for(var i=0;i<li.length;i++){ 99 if(li[i].innerHTML.toUpperCase().indexOf(fliter)>-1){ 100 li[i].style.display="block"; 101 }else{ 102 li[i].style.display="none"; 103 } 104 105 } 106 107 } 108 </script> 109 </body> 110 </html>