<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>Hello World</title> <link href="style.css" rel="external nofollow" rel="stylesheet" type="text/css"> <script type="text/javascript"> sources= new Array("www.sina.com","www.baidu.com","www.google.com","www.sina.org","www.baidu.ogr.cn"); tabinfo = ""; flag = new Array(sources.length); for(var i=0;i<flag.length;i++) flag[i] = false ; function immediately(){ var element = document.getElementById("i1"); if("v"=="v") { element.onpropertychange = webChange; }else{ element.addEventListener("input",webChange,false); } function webChange(){ var tab = document.all("dl1"); for(var i=0;i<flag.length;i++) flag[i] = false ;//重新初始化 if(element.value){ var content = document.getElementById("i1").value; for(var i = 0 ;i < sources.length ; i ++){ if(sources[i].indexOf(content) != -1){ flag[i] = true; } } for(var j=0;j<flag.length;j++){ if(flag[j]){//sources[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 = ""; } } } } } </script> <script language="javascript"> var lastObj=null; function backBlack(){ event.srcElement.style.background="gray"; forceBackC6(); if(event.srcElement.tagName=="TD"){ lastObj=event.srcElement; } fillData(); } function backC6(){ event.srcElement.style.background="#CCCCCC"; } function forceBackC6(){ if(lastObj!=null) lastObj.style.background="#F8F8FF"; } function fillData(){ if(lastObj.innerHTML!=null) document.all.i1.value=lastObj.innerHTML; } function init(){ Layer1.style.top=i1.offsetTop+40; Layer1.style.left=i1.offsetLeft; Layer1.style.visibility="visible"; } function hideBelow(){ Layer1.style.visibility="hidden"; } </script> </head> <body> <input type="text" id="i1" onFocus="init()" onBlur="hideBelow()" /> <script type="text/javascript"> immediately(); </script> <div id="Layer1"> <table id="dl1" cellspacing="0" onMouseOut="backC6()" onMouseOver="backBlack()" border="0" > </table> </div> <br> </body> </html>
【JS实现关键字搜索时的相关下拉字段效果】相关文章：
★ CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法