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


Posted in Javascript onAugust 05, 2014
<!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>
Javascript 相关文章推荐
Javascript 表单之间的数据传递代码
Dec 04 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
vue-loader教程介绍
Jun 14 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
JavaScript实现简单日历效果
Sep 11 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 #Javascript
JavaScript中的函数重载深入理解
Aug 04 #Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 #Javascript
jQuery 删除或是清空某个HTML元素示例
Aug 04 #Javascript
js实现正方形颜色从下往上升的效果
Aug 04 #Javascript
与Math.pow 相反的函数使用介绍
Aug 04 #Javascript
简单易用的倒计时js代码
Aug 04 #Javascript
You might like
10 个经典PHP函数
2013/10/17 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
JavaScript如何使用插值实现图像渐变
2020/06/28 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
wxPython窗口的继承机制实例分析
2014/09/28 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
装配出错检讨书
2014/09/23 职场文书
领导干部个人整改措施落实情况汇报
2014/10/29 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
初中团委工作总结
2015/08/13 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python
Javascript的promise,async和await的区别详解
2022/03/24 Javascript