javascript仿百度输入框提示自动下拉补全
时间:2016-01-08
本文实例讲解了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="/Public/js/jquery-1.7.1.min.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>
- 深入分析网络编程中踩过的坑
- java之自动过滤提交文本中的html代码script代码
- Enumerable#zip特性
- java小技术之生成二维码
- java实现发送邮件服务器,SMTP协议发送邮件
- HttpURLConnection实现两个服务端的对接
- java获取properties配置文件值
- 安全退出app,activoty栈管理
- JavaBean转Map方法
- JsBridge实现JavaScript和Java的互相调用
- JAVA-FTP批量大文件传输
- 独家 | 一文读懂TensorFlow(附代码、学习资料)
- 解决openssh漏洞,升级openssh版本
- 解决NTPD漏洞,升级Ntpd版本
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java中多线程的使用(超级超级详细)+多线程的实现原理 2
- protobuffer的前世今生(三)——序列化和反序列化性能比较
- 女生勿扰,只适合男孩子的 Python 爬虫,里面东西不给钱统统白送
- LTP 4来了!
- protobuffer的前世今生(五)——在Java中的两种使用方式之注解模式
- Java File类基础解析 1
- jit即使编译语言调用c++
- java JDBC系列1 JDBC类的简析与JDBC的基础操作
- TRTC Android端开发接入学习之常见问题(十一)
- 树莓派基础实验7:倾斜开关实验
- Hive SQL经典优化案例
- 树莓派基础实验8:振动开关实验
- 几行代码实现cookie的盗取
- 从apollo的初始化看spring boot 1.5.3启动过程( 一)
- CSRF(跨站请求伪造)学习总结