js实现仿百度搜索框自动提示功能

最新推荐文章于 2024-10-17 15:30:23 发布

星辰落海

最新推荐文章于 2024-10-17 15:30:23 发布

阅读量621

点赞数 1

分类专栏： js 文章标签： css javascript html

本文链接：https://blog.csdn.net/weixin_45596380/article/details/105945528

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

提示：touppercase()方法用于把字符串小写字母转换成大写

<input type="text" id="myInput" placeholder="搜索..." onkeyup="myFunction()">
<ul id="myUL">
  <li><a class="header" href="#">A</a></li>
  <li><a href="#">able</a></li>
  <li><a href="#">acet</a></li>
  <li><a href="#">activet</a></li>
  
  <li><a class="header" href="#">B</a></li>
  <li><a href="#">be</a></li>
  <li><a href="#">belive</a></li>
  <li><a href="#">back</a></li>
  
  <li><a class="header" href="#">C</a></li>
  <li><a href="#">car</a></li>
  <li><a href="#">cont</a></li>
  <li><a href="#">color</a></li>
  
  <li><a class="header" href="#">D</a></li>
  <li><a href="#">dog</a></li>
  <li><a href="#">desk</a></li>
  <li><a href="#">dection</a></li>
</ul>

#myInput{
   background: url(https://static.runoob.com/images/mix/searchicon.png)no-repeat;
   background-position:10px 11px;
   padding:12px 20px 12px 40px;
   border: 1px solid #ddd; 
   font-size:16px;
   margin-bottom: 12px; 
   width:100%;
}
#myUL{
  list-style:none;
  padding:0;
  margin:0
}
#myUL li a{
  text-decoration:none;
  color:black;
  border:1px solid #ddd;
  background-color:#f6f6f6;
  padding:12px;
  font-size:18px;
  display:block;
  margin-top:-1;
}
#myUL li a.header{
  background-color:#e2e2e2;
}
#myUL li a:hover:not(.header){
  background-color:#eee;
}

function myFunction(){
  var li,a,i,input,filter,ul;
  input=document.getElementById("myInput");
  ul=document.getElementById("myUL");
  li=ul.getElementsByTagName("li");
  filter=input.value.toUpperCase();
  //循环所有列表
  for(i=0;i<li.length;i++){
    a=li[i].getElementsByTagName("a")[0];
    if(a.innerHTML.toUpperCase().indexOf(filter)>-1){
      li[i].style.display="";
    }else{
      li[i].style.display="none";
    }
  }
   
  
}