js小例子（简单模糊匹配输入信息）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

 <!DOCTYPE html>

 <html>

     <style>

         p{

         width:200px;

         height:2em;

             padding:0;

             margin:0;

         background:#D4D4D4;

             display:none;

             border-bottom:1px solid black;

         }

         p:hover{

         background:#F7F7F7;

         }

         div{

         height:100px;

             width:200px;

         overflow-x:hidden;

         }

     </style>

 <body >

  <input type="text" id="input" onkeyup="query()" >

     <div >

     <p onclick="select(this)">js</p>

     <p onclick="select(this)">wes</p>

     <p onclick="select(this)">che</p>

     <p onclick="select(this)">women</p>

     <p onclick="select(this)">jswo</p>

     </div>

     <script>

         function select(obj){

         var text = document.getElementById("input");

         text.value = obj.innerHTML;   //实现选择

             var p = document.getElementsByTagName("p");

             for(var i=0;i<p.length;i++){

             p[i].style.display="none";  //选择完以后隐藏

             }

         }

         function query(){

         var p = document.getElementsByTagName("p");

         var text = document.getElementById("input");

         for(var i=0;i<p.length;i++){

         p[i].style.display="none";

         if(p[i].innerHTML.match(text.value)){ //匹配输入信息

         p[i].style.display="block";

         }

         }

         }

     </script>

 </body>

 </html>