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 相关文章推荐
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
JSON获取属性值方法代码实例
Jun 30 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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网站基础优化方法小结
2008/09/29 PHP
php中将一个对象保存到Session中的方法
2015/03/13 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
Javascript 面向对象 命名空间
2010/05/13 Javascript
javascript定义函数的方法
2010/12/06 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
js微信分享实现代码
2020/10/11 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
Django开发的简易留言板案例详解
2018/12/04 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
python退出循环的方法
2020/06/18 Python
机关作风建设自查报告
2014/10/22 职场文书
内勤岗位职责范本
2015/04/13 职场文书
学校元旦晚会开场白
2015/05/29 职场文书