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 相关文章推荐
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
js中split和replace的用法实例
Feb 28 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
做一个有下拉功能的留言版
2006/10/09 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
js 多种变量定义(对象直接量,数组直接量和函数直接量)
2010/05/24 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
js+html制作简单验证码
2017/02/16 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
js中switch语句的学习笔记
2020/03/25 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
python deque模块简单使用代码实例
2020/03/12 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
python空元组在all中返回结果详解
2020/12/15 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
五水共治一句话承诺
2014/05/30 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
认真学习保证书
2015/02/26 职场文书
辞职信怎么写?
2019/05/21 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python
Pillow图像处理库安装及使用
2022/04/12 Python
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL