JS搜索菜单实现

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>
猜你喜欢
