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

更新时间：2014年08月05日 08:53:37 投稿：whsnow

关键字搜索时有下拉字段，在使用百度时会遇到,本例讲述用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>

您可能感兴趣的文章:

IE8中使用javascript动态加载CSS的解决方法
这篇文章主要介绍了IE8中使用javascript动态加载CSS的解决方法,此方法也不是很完美,需要的朋友参考下吧
2014-06-06
理解JS绑定事件
这篇文章主要帮助大家深入理解JS绑定事件，介绍了六种JS绑定事件的情况，感兴趣的小伙伴们可以参考一下
2016-01-01
javascript实现富文本框选中对齐的思路与代码
最近在项目中经常遇到使用富文本框的情况,下面这篇文章主要给大家介绍了关于javascript实现富文本框选中对齐的思路与代码,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-03-03
javaScript中with函数用法实例分析
这篇文章主要介绍了javaScript中with函数用法,实例分析了javascript中with的功能、定义及相关使用技巧,需要的朋友可以参考下
2015-06-06
如何利用echarts画雷达图和折柱混合
最近使用echarts做的一个H5的成绩数据报告,里面使用了雷达图已经折线图和柱状图,下面这篇文章主要给大家介绍了关于如何利用echarts画雷达图和折柱混合的相关资料,需要的朋友可以参考下
2022-04-04
js 函数性能比较方法
在学习js过程中,经常会遇到同样一个功能点这样实现也可以,那样实现也可以。但是哪个方式最优呢
2020-08-08
js实现TAB切换对应不同颜色的代码
这篇文章主要介绍了js实现TAB切换对应不同颜色的代码,涉及javascript页面元素的遍历及样式的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
javascript showModalDialog模态对话框使用说明
使用javascript打开模态对话框，想学习showModalDialog使用方法的朋友可以参考下。
2009-12-12
Jquery Autocomplete 结合asp.net使用要点
Jquery的Autocomplete是一个很好的智能提示插件，但是在实际使用过程中还是会遇到一些小问题.
2010-10-10
JavaScript自定义日历实现签到功能
这篇文章主要为大家详细介绍了JavaScript自定义日历实现签到功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08