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

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

2021-02-03 16:35whsnow JavaScript

关键字搜索时有下拉字段，在使用百度时会遇到,本例讲述用js实现类似的效果

				?

									<!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>