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>

 

posted @ 2015-11-04 20:49  纸鸢&红豆·绿豆  阅读(643)  评论(0)  编辑  收藏  举报