标签：
简单的使用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 onclick=‘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 }
标签：
原文地址：http://www.cnblogs.com/MY-LONG/p/5684310.html
