首页 > 编程 > JavaScript > 正文

JS实现关键字搜索时的相关下拉字段效果

2019-11-20 14:17:48
字体:
来源:转载
供稿:网友
<!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" 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>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表