zoukankan      html  css  js  c++  java
  • 搜索框自动搜索

      效果图:

     

      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{
    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;
    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";
    }
    }
    }

     

     

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

  • 相关阅读:
    CodeForces 446A. DZY Loves Sequences(最长上升子序列)
    CodeForces
    2020牛客暑期多校训练营(第一场)
    POJ3281-Dining(最大流)(拆点)
    「杂题」图论杂题选做
    「学习小结」CDQ 分治多维偏序问题
    「算法笔记」Tarjan 算法 双连通分量
    「算法笔记」状压 DP
    「算法笔记」数位 DP
    「算法笔记」矩阵乘法
  • 原文地址:https://www.cnblogs.com/snowbxb/p/11264268.html
Copyright © 2011-2022 走看看