zoukankan      html  css  js  c++  java
  • 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>
    努力吧,为了媳妇儿,为了家。。。
  • 相关阅读:
    NOsql总结
    关于Swift中的指针的那些事
    并发控制的概念
    并发控制--Concurrency control--乐观、悲观及方法
    数据库的三大系统
    数据库沉思录
    代码结构化(分层)阅读
    代码阅读困难的原因
    数据库锁与并发
    SQLite事务、错误与自动回滚
  • 原文地址:https://www.cnblogs.com/jlj9520/p/4937330.html
Copyright © 2011-2022 走看看