实现模糊下拉查询功能

最新推荐文章于 2020-12-14 19:20:37 发布

aywfsy70619

最新推荐文章于 2020-12-14 19:20:37 发布

阅读量126

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/MY-LONG/p/5684310.html

版权

简单的使用heml和js实现的一个文本框模糊查询外加下拉选择功能，这个功能没加按钮

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <style>
 8         /**
 9          * 
10          */
11         ul{
12             margin: 0 0;
13             padding: 0 0;
14         }
15         #divUl{display: none;}
16         li{list-style-type: none;}
17     </style>
18     <body>
19         <div id="divSel">
20             <input type="text" id="stext" name="stext" oninput="searchText()"/> <!--oninput事件 当文本框值改变时触发-->
21             <ul id="ulText">
22             </ul>
23         </div>
24         <div>  <!--以后链接数据这个就不需要了-->
25             <ul id="divUl">
26                 <li>你好</li>
27                 <li>你哦</li>
28                 <li>啊好</li>
29                 <li>额好</li>
30                 <li>规定好</li>
31                 <li>你二人</li>
32                 <li>你好我是好人</li>
33             </ul>
34         </div>
35     </body>
36     <script type="text/javascript" src="../faceJs/new_file.js" ></script>
37 </html>

 1 /**
 2  * searchText函数  oninput事件触发
 3  */
 4 function searchText() {
 5     var val = document.getElementById("stext").value;
 6     var nodes = document.getElementById("divUl").childNodes;
 7     var len = nodes.length;
 8     var newLi = "";
 9     if(val != "") {
10         for(var i = 0; i < len; i++) {
11             var txt = nodes[i].innerText;
12             if(txt != undefined) {
13                 var index = txt.indexOf(val);
14                 if(index > -1) {
15                     newLi = newLi + "<li οnclick='newLiChange(this)'>" + txt + "</li>";
16                 }
17             }
18         }
19         document.getElementById("ulText").innerHTML = newLi;
20     }else {
21         document.getElementById("ulText").innerHTML = "";
22     }
23 }
24 
25 function newLiChange(data) {  
26     var newVal = data.innerText;
27     document.getElementById("stext").value = newVal;
28     document.getElementById("ulText").innerHTML = "";
29 }

转载于:https://www.cnblogs.com/MY-LONG/p/5684310.html

aywfsy70619

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现模糊下拉查询功能

简单的使用heml和js实现的一个文本框模糊查询外加下拉选择功能，这个功能没加按钮 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 ...
复制链接

扫一扫