搜索框自动搜索

  效果图：

 

 

　　html:

 

<input id="inner" type="text" placeholder="请输入字母搜索..." onkeyup="searchinner()"/>
<ul class="myUrl">
<li class="header"><a href="#">A</a></li>
<li><a href="#">abcde</a></li>
<li><a href="#">abcdefghi</a></li>
<li><a href="#">ahigklmnop</a></li>
<li class="header"><a href="#">B</a></li>
<li><a href="#">bopqRst</a></li>
<li><a href="#">buvwxya</a></li>
<li><a href="#">buvwxyzz</a></li>
<li class="header"><a href="#">C</a></li>
<li><a href="#">cat</a></li>
<li><a href="#">cctv</a></li>
<li class="last"><a href="#">couron</a></li>
</ul>

 

 　　css:

 

input{
width: 80%;
height: 30px;
border: 1px solid #ccc;
padding: 5px 10px;
}
ul{
padding-inline-start: 0px;
margin-top: -1px;
}
li{
padding: 5px 10px;
list-style: none;
width: 80%;
border: 1px solid #ccc;
background-color: lightgoldenrodyellow;
cursor: pointer;
display: block;

}
li a{
text-decoration: none;

}
.header{
background-color: burlywood;
cursor: default;
}

li:hover:not(.header){
background-color: #eee;
}

 

 　　js:

 

function searchinner(){
var ul=document.getElementsByTagName("ul");
var li=document.getElementsByTagName("li");
var input=document.getElementById("inner");
var inner=input.value.toUpperCase();

 

for(var i=0;i<li.length;i++){
//将li标签中的a标签里的内容转换成大写
a=li[i].getElementsByTagName("a")[0].innerHTML.toUpperCase();
if(a.indexOf(inner)>-1){
li[i].style.display="block";
}else{
li[i].style.display="none";
}
}
}

 

 

小白一枚，如有错误，请帮忙指出哦， 路过的大神手下留情，多多指教谢谢。