信鸽网

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

  作者：bea

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


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





有用  |  无用

猜你喜欢

您可能感兴趣的文章: