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 相关文章推荐
jQuery之字体大小的设置方法
Feb 27 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
Vue指令实现OutClick的示例
Nov 16 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
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
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
jquery 指南/入门基础
2007/11/30 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
JavaScript闭包相关知识解析
2019/10/19 Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
Python中属性和描述符的正确使用
2016/08/23 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python多线程实现TCP服务端
2019/09/03 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
Vans澳大利亚官网:购买鞋子、服装及配件
2019/09/05 全球购物
公司财务流程之主管工作流程
2014/03/03 职场文书
学习保证书范文
2014/04/30 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
协议书范文
2015/01/27 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书