脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript仿百度输入框提示

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

 更新时间：2016年01月07日 16:11:28   投稿：lijiao  
这篇文章主要介绍了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • uniapp高频面试题及答案合集

    uniapp高频面试题及答案合集

    uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到IOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台,下面这篇文章主要给大家介绍了关于uniapp高频面试题及答案的相关资料,需要的朋友可以参考下
    2023-02-02
  • JavaScript避免代码的重复执行经验技巧分享

    JavaScript避免代码的重复执行经验技巧分享

    经常会发现一个问题，那就是重复的代码执行，下面就是一些在查看它们的源代码时发现一些问题，把这些分享给大家，希望能让你们更加简洁高效的写出JavaScript代码
    2014-04-04
  • uni-app路由配置文件pages.json平台化拆分

    uni-app路由配置文件pages.json平台化拆分

    这篇文章主要为大家介绍了uni-app路由配置文件pages.json平台化拆分示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • Extjs4实现两个GridPanel之间数据拖拽功能具体方法

    Extjs4实现两个GridPanel之间数据拖拽功能具体方法

    这篇文章主要介绍了Extjs4实现两个GridPanel之间数据拖拽功能具体方法，有需要的朋友可以参考一下
    2013-11-11
  • JS实现可切换图片的幻灯切换效果示例

    JS实现可切换图片的幻灯切换效果示例

    这篇文章主要介绍了JS实现可切换图片的幻灯切换效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-05-05
  • js实现旋转的星空效果

    js实现旋转的星空效果

    这篇文章主要为大家详细介绍了js实现旋转的星空效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • JavaScript实现图像模糊化的方法实例

    JavaScript实现图像模糊化的方法实例

    这篇文章主要介绍了JavaScript实现图像模糊化的方法,文中先进行简单介绍，而后给出了完整的实例代码，有需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-01-01
  • 微信小程序wepy框架学习和使用心得详解

    微信小程序wepy框架学习和使用心得详解

    这篇文章主要介绍了微信小程序wepy框架学习和使用心得详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 详谈$.data()的用法和作用

    详谈$.data()的用法和作用

    下面小编就为大家带来一篇详谈$.data()的用法和作用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 一文熟练掌握JavaScript中Object.keys()与Object.values()的实用技巧

    一文熟练掌握JavaScript中Object.keys()与Object.values()的实用技巧

    本文详细介绍了JavaScript中Object.keys()和Object.values()方法的使用方法、功能及应用场景,通过实例展示了如何使用这些方法进行对象的遍历、复制、比较和属性计算等操作,需要的朋友可以参考下
    2025-01-01

最新评论