javascript仿百度输入框提示自动下拉补全


Posted in Javascript onJanuary 07, 2016

本文实例讲解了javascript输入框自动下拉补全操作,仿百度、谷歌搜索框提示,具体内容如下

效果图:

javascript仿百度输入框提示自动下拉补全

javascript仿百度输入框提示自动下拉补全

具体代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <META NAME="Generator" CONTENT="EditPlus">
 <META NAME="Author" CONTENT="">
 <META NAME="Keywords" CONTENT="">
 <META NAME="Description" CONTENT="">
 <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  /*自动下拉补全 zhk */
  var highlightindex=-1;//当前高亮的节点
 $(document).ready(function(){
 var wordInput=$("#word");
 var wordInputOffset=wordInput.offset();
 
  $("#auto").hide().css("border","1px black solid").css("position","absolute")
  .css("top",wordInputOffset.top+wordInput.height()+5+"px")
  .css("left",wordInputOffset.left+"px").width(wordInput.width()+2);
 
 wordInput.keyup(function (event){
 
  var myEvent=event||window.event;
  var keyCode=myEvent.keyCode;
  if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){
 
   var wordText=$("#word").val();
   var autoNode=$("#auto");
   if(wordText!=""){
   
    
    var wordNodes=$("span");
    
    autoNode.html("");
    wordNodes.each(function(i){
     var wordNode=$(this);
     var newDivNode=$("<div>").attr("id",i);
      
     newDivNode.html(wordNode.text()).appendTo(autoNode);
     newDivNode.mouseover(function(){//鼠标进入
      if(highlightindex!=-1){
        $("#auto").children("div").eq(highlightindex)
        .css("background-color","white");
       }
       highlightindex=$(this).attr("id");
       $(this).css("background-color","red");
      })
 
      newDivNode.mouseout(function(){//鼠标移除
       $(this).css("background-color","white");
      
       })
newDivNode.click(function(){//点击
       var comText=$(this).text();
       $("#auto").hide();
     highlightindex=-1;
     $("#word").val(comText);
       })
 
    })
    if(wordNodes.length>0){
     autoNode.show();
    }else{
     autoNode.hide();
     highlightindex=-1;
     }
   
   }else{
   autoNode.hide();
    highlightindex=-1;
    }
 
   }else if(keyCode==38||keyCode==40){
     if(keyCode==38){//向上
      var autoNodes=$("#auto").children("div");
       if(highlightindex!=-1){
        autoNodes.eq(highlightindex).css("background-color","white");
         highlightindex--;
       }else{
        highlightindex=autoNodes.length-1;
       }
       
       if(highlightindex==-1){
        highlightindex=autoNodes.length-1;
       }
       autoNodes.eq(highlightindex).css("background-color","red");
     }
     if(keyCode==40){
      var autoNodes=$("#auto").children("div");
       if(highlightindex!=-1){
        autoNodes.eq(highlightindex).css("background-color","white");
       }
       highlightindex++;
       if(highlightindex==autoNodes.length){
        highlightindex=0;
       }
       autoNodes.eq(highlightindex).css("background-color","red");
     }
   }else if(keyCode==13){
     
    if(highlightindex!=-1){
     var comText=$("#auto").hide().children("div").eq(highlightindex).text();
     highlightindex=-1;
     $("#word").val(comText);
     }else{
      alert("文本框中的【"+$("#word").val()+"】被提交了");
      $("#auto").hide();
       $("#word").get(0).blur();//失去焦点
     }
    }
  });
 
  $("input [type='button']").click(function(){
   alert("文本框中的【"+$("#word").val()+"】被提交了");
  });
 
 
})
</script>
 </HEAD>
 
 <BODY>
 <input type="text" id="word">
<input type="button" value="提交">
<div id="auto"></div>
<p>
<span>aaa</span>
<span>abc</span>
<span>abd</span>
<span>bbc</span>
<span>beb</span>
<span>cer</span>
<span>erd</span>
<span>beg</span>
<p>
 </BODY>
</HTML>

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript简单事件处理和with用法介绍
Sep 16 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
用webAPI实现图片放大镜效果
Nov 23 Javascript
基于jquery实现表格无刷新分页
Jan 07 #Javascript
js密码强度检测
Jan 07 #Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 #Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 #Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 #Javascript
JavaScript设计模式初探
Jan 07 #Javascript
JavaScript类型系统之Object详解
Jan 07 #Javascript
You might like
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
js获取url中指定参数值的示例代码
2013/12/14 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[52:08]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第一局
2016/03/05 DOTA
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
简单介绍Ruby中的CGI编程
2015/04/10 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python重要函数eval多种用法解析
2020/01/14 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
班组长的岗位职责
2013/12/09 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
安全教育主题班会教案
2015/08/12 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis
OpenCV-Python实现轮廓的特征值
2021/06/09 Python