JS implémente les effets de champs déroulants associés lors des compétences de recherche de mots clés

JS implémente les effets de champs déroulants associés lors des compétences de recherche de mots clés_javascript
WBOY
Libérer： 2016-05-16 16:40:24
original
1336 Les gens l'ont consulté
<!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>
Copier après la connexion