javascript仿百度输入框提示自动下拉补全_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:21 PM

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程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7393

Java教程

1630

CakePHP 教程

1358

Laravel 教程

1268

PHP教程

1217

显示更多

Related knowledge

谷歌浏览器提示此标签页的内容正在被共享怎么办？ Mar 13, 2024 pm 05:00 PM

　　谷歌浏览器提示此标签页的内容正在被共享怎么办？我们在使用谷歌浏览器打开新标签的时候有时候会遇到提示此标签页的内容正在被共享，那么这是怎么回事？下面就让本站来为用户们来仔细的介绍一下谷歌浏览器提示此标签页的内容正在被共享的问题解析吧。　　谷歌浏览器提示此标签页的内容正在被共享解决方法　　1、打开谷歌浏览器，在浏览器右上角可以看到三个点“自定义和控制Googlechrome”用鼠标点击图标进行图标。　　2、点击后，谷歌浏览器的菜单窗口将弹出到下面，鼠标将移动到“更多工具

如何使用WebSocket和JavaScript实现在线语音识别系统 Dec 17, 2023 pm 02:54 PM

如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

如何使用WebSocket和JavaScript实现在线预约系统 Dec 17, 2023 am 09:39 AM

如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工

如何利用JavaScript和WebSocket实现实时在线点餐系统 Dec 17, 2023 pm 12:09 PM

如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单

JavaScript和WebSocket：打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

百度贴吧app提示操作过于频繁怎么回事 Apr 01, 2024 pm 05:06 PM

百度贴吧app提示操作过于频繁这种提示通常是为了维护平台的正常运行和用户体验，以防止恶意刷屏、广告刷帖等不当行为，具体的处理方法各位可以看小编分享教程哦。百度贴吧app提示操作过于频繁处理方法分享1、当系统提示【操作太频繁】的时候，我们需要等待一段时间，如果着急可以先去做一点别的事情，一般等待一会之后，这个提示信息就会自动消失，这时候我们就可以正常使用了。2、如果等了很久之后，它还是显示【操作过于频繁】，我们可以尝试去贴吧应急吧、贴吧意见反馈吧等官方贴吧，发帖反馈这种现象，请求官方人员解决。3、

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题