JS实现关键字搜索下拉字段

来源：互联网发布：阿里云上传视频教程编辑：程序博客网时间：2024/06/16 04:45
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>Hello World</title><link href="style.css" 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"  style="height:20px" onFocus="init()" onBlur="hideBelow()"  /><script type="text/javascript">immediately();</script><div id="Layer1">  <table id="dl1" class="midHead" cellspacing="0" onMouseOut="backC6()" onMouseOver="backBlack()"  border="0" >      </table></div><br></body></html>
0 0