• js小例子(简单模糊匹配输入信息)


    该例子实现的是用户输入信息或者字母时可以搜索出来,鼠标点击选择

     1 <!DOCTYPE html>
     2 <html>
     3     <style>
     4         p{
     5         width:200px;
     6         height:2em;
     7             padding:0;
     8             margin:0;
     9         background:#D4D4D4;
    10             display:none;
    11             border-bottom:1px solid black;
    12         }
    13         p:hover{
    14         background:#F7F7F7;
    15         }
    16         div{
    17         height:100px;
    18             width:200px;
    19         overflow-x:hidden;
    20         }
    21     </style>
    22 <body >
    23  <input type="text" id="input" onkeyup="query()" >
    24     <div >
    25     <p onclick="select(this)">js</p>
    26     <p onclick="select(this)">wes</p>
    27     <p onclick="select(this)">che</p>
    28     <p onclick="select(this)">women</p>
    29     <p onclick="select(this)">jswo</p>
    30     </div>
    31     <script>
    32         function select(obj){
    33         var text = document.getElementById("input");
    34         text.value = obj.innerHTML;   //实现选择
    35             var p = document.getElementsByTagName("p");
    36             for(var i=0;i<p.length;i++){
    37             p[i].style.display="none";  //选择完以后隐藏
    38             }
    39         }
    40         function query(){
    41         var p = document.getElementsByTagName("p");
    42         var text = document.getElementById("input");
    43         for(var i=0;i<p.length;i++){
    44         p[i].style.display="none";
    45         if(p[i].innerHTML.match(text.value)){ //匹配输入信息
    46         p[i].style.display="block";
    47         }
    48         }
    49         }
    50         
    51     </script>
    52 </body>
    53 </html>
    努力吧,为了媳妇儿,为了家。。。
  • 相关阅读:
    Pycharm中直接安装第三方库
    http协议与https协议
    调用第三方支付--支付宝
    探索性测试 之 极速测试
    常见HTTP状态码
    git: windows git ssh keys生成
    Jmeter实现MD5加密
    算法 ----- 排序NB二人组 堆排序 归并排序
    web 应用 及 补充
    Python Django框架 补充
  • 原文地址:https://www.cnblogs.com/jlj9520/p/4937330.html
Copyright © 2020-2023  润新知