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

178 阅读 0 评论 118 点赞

我是靠谱客的博主忧郁口红，最近开发中收集的这篇文章主要介绍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>