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字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
koa-passport实现本地验证的方法示例
Feb 20 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
PHP以及MYSQL日期比较方法
2012/11/29 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
JQuery动画和停止动画实例代码
2013/03/01 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
vue中使用ueditor富文本编辑器
2018/02/08 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
Python中Django 后台自定义表单控件
2017/03/28 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
简单了解python的break、continue、pass
2019/07/08 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Python新手学习函数默认参数设置
2020/06/03 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
土木工程应届生自荐信
2013/09/24 职场文书
行政管理专业推荐信
2013/11/02 职场文书
音乐学个人的自荐书范文
2013/11/26 职场文书
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript