代码描述:js文本框 输入关键字 弹出内容提示。js文本框输入关键字弹出内容提示源码实例
当前不少人性化的网站,在文本框或者搜索框这样类似的功能下了很多的功夫,能够在很大程度上提高网站的人性化程度,比如在搜索框输入关键字的时候,能够出现相匹配的下来提示内容,如果下拉的内容有用户需要的选项,那么就会给使用者带来不少便利,下面就是一段能够实现此功能的简单代码,下面就进行一下分享,并对代码的实现进行详细的注释。 代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <script type="text/javascript"> sources= new Array("www.51qianduan.com","www.baidu.com","www.google.com","softwhy.net"); tabinfo = ""; flag=new Array(sources.length); for(var index=0;index<flag.length;index++){ flag[index]=false ; } function immediately(){ var element=document.getElementById("txt"); if("\\v"=="v"){ element.onpropertychange=webChange; } else{ element.addEventListener("input",webChange,false); } function webChange(){ var tab = document.all("dl1"); for(var index=0;index<flag.length;index++){ flag[index] = false ;//重新初始化 } if(element.value){ var content=document.getElementById("txt").value; for(var index=0;index<sources.length;index++){ if(sources[index].indexOf(content)!=-1){ flag[index]=true; } } for(var j=0;j<flag.length;j++){ if(flag[j]){ if(tab.rows.length>0){ for(var k=0;k<tab.rows.length;k++){ if(tab.rows[k].cells[0].innerText.indexOf(content) == -1){ tab.deleteRow(k); } } } for(var k=0;k<tab.rows.length;k++){ tabinfo += tab.rows[k].cells[0].innerText; } if(tabinfo.indexOf(sources[j]) == -1){ nrow = tab.insertRow(0); newcell = nrow.insertCell(); newcell.innerHTML = sources[j] } tabinfo = ""; } } } } } var lastObj=null; function setSingleBack(){ event.srcElement.style.background="gray"; forceBackColor(); if(event.srcElement.tagName=="TD"){ lastObj=event.srcElement; } fillData(); } function setAllBack(){ event.srcElement.style.background="#CCCCCC"; } function forceBackColor(){ if(lastObj!=null){ lastObj.style.background="#F8F8FF"; } } function fillData(){ if(lastObj.innerHTML!=null){ document.all.txt.value=lastObj.innerHTML; } } function init(){ layer.style.top=txt.offsetTop+40; layer.style.left=txt.offsetLeft; layer.style.visibility="visible"; } function hideBelow(){ layer.style.visibility="hidden"; } window.onload=function(){ var otxt=document.getElementById("txt"); var odll=document.getElementById("dl1"); immediately(); otxt.onfocus=function(){ init(); } otxt.onblur=function(){ hideBelow(); } odll.onmouseout=function(){ setAllBack(); } odll.onmouseover=function(){ setSingleBack(); } } </script> </head> <body> <input type="text" id="txt" style="height:20px"/> <div id="layer"> <table id="dl1" cellspacing="0" border="0"></table> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能