仿Google首页搜索自动补全
2011-12-13 20:39
525 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 自动完成功能(优化版)</title>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
</head>
<body>
<script type="text/javascript">
var highlightindex = -1;//表示当前高亮节点
var timeoutId;
$(document).ready(function() {
var wordInput = $("#word");//文本框
var wordInputwordInputOffset = 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() + 3 + "px");
wordInput.keyup(function(event) {
//处理文本框中的键盘事件
//如果输入字母，将文本框中最新信息发送给服务器
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;//获得键值
if (keyCode == 27) {
var wordText = $("#word").val();
autoHide();
wordInput.text(wordText);
}
else {
if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) { //8对应退格键，46对应删除键
var wordText = $("#word").val();//获得文本框中的内容
var autoNode = $("#auto");
if (wordText != "") {
clearTimeout(timeoutId);//对上次未完成的延时操作进行取消
//延时操作，减少与服务器的交互次数，延时500ms，防止用户操作过快
timeoutId = setTimeout(function() {
$.post("AutoCompleteServlet", {word:wordText}, function(data) {//发送数据，第二项是属性名对应属性值
var jqueryObj = $(data);//将dom对象data转换成jQuery的对象
var wordNodes = jqueryObj.find("word");//找到所有word节点
autoNode.html("");
wordNodes.each(function(i) { //i是索引，用来给id赋值
var wordNode = $(this);//获取单词内容
var newDivNode = $("<div>").attr("id", i).css("backgroundColor", "white");
newDivNode.html(wordNode.text()).appendTo(autoNode);//新建div节点，加入单词内容
//增加鼠标进入事件，高亮节点
newDivNode.mouseover(function() {
//将原来高亮的节点取消高亮
if (highlightindex != -1) {
$("#auto").children("div").eq(highlightindex)
.css("backgroundColor", "white");
}
//记录新的高亮索引
highlightindex = $(this).attr("id");
$(this).css("backgroundColor", "#3366CC").css("cursor","pointer");
});
//增加鼠标移出事件，取消节点高亮
newDivNode.mouseout(function() {
if (keyCode == 13) { //判断是否按下回车键
//下拉框有高亮
if (highlightindex != -1) {
lightEventHide();
highlightindex = -1;
} else {
alert("文本框中的[" + $("#word").val() + "]被提交了");
autoHide();
$("#word").get(0).blur();//让文本框失去焦点
}
//取消鼠标移出节点的高亮
//$(this).css("backgroundColor", "white");
}
}
);
//增加鼠标点击事件,可以进行补全
newDivNode.click(function() {
//取出高亮节点的文本内容
var comText = $(this).text();
autoHide();
highlightindex = -1;
//文本框内容变为高亮节点内容
$("#word").val(comText);
});
});
//添加单词内容到弹出框
if (wordNodes.length > 0) {
autoNode.show();
} else {
autoNode.hide();
highlightindex = -1;//弹出框隐藏，高亮节点索引设成-1
}
}, "xml");
}, 300);
}
else
{
autoNode.hide();
highlightindex = -1;
}
} else if (keyCode == 38 || keyCode == 40) { //判断是否输入的是向上38向下40按键
if (keyCode == 38) {
var autoNodes = $("#auto").children("div").css("background-color", "white");
if (highlightindex != -1) {
autoNodes.eq(highlightindex).css("background-color", "white");
highlightindex--;
} else {
lightEvent();
highlightindex = autoNodes.length - 1;
}
if (highlightindex == -1) {
highlightindex = autoNodes.length - 1;//如果改变索引值后index变成-1，则将索引值指向最后一个元素
}
lightEvent();
autoNodes.eq(highlightindex).css("backgroundColor", "#3366CC");
}
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;//如果改变索引值等于最大长度，则将索引值指向第一个元素
}
lightEvent();
autoNodes.eq(highlightindex).css("backgroundColor", "#3366CC");
}
} else if (keyCode == 13) { //判断是否按下回车键
//下拉框有高亮
if (highlightindex != -1) {
lightEventHide();
highlightindex = -1;
} else {
alert("文本框中的[" + $("#word").val() + "]被提交了");
$("#auto").hide();
$("#word").get(0).blur();//让文本框失去焦点
}
//下拉框没有高亮
}
}
}
)
;
$("input[type='button']").click(function() {
alert("文本框中的[" + $("#word").val() + "]被提交了");
});
});
function lightEventHide(){
var comText = $("#auto").hide().children("div").eq(highlightindex).text();
$("#word").val(comText);
}
function lightEvent(){
var comText = $("#auto").children("div").eq(highlightindex).text();
$("#word").val(comText);
}
function autoHide(){
$("#auto").hide();
}
</script>
<h3>
<center>施杨 仿google自动补全(jQuery优化版)</center>
</h3>
<br />
<table align="center">
<tr><td>
<input type="text" id="word" maxlength=2048 size=55 />
<br/>
<td></tr>
<tr><td align="center">
<input type="button" value="shiyang 搜索"/>
</td></tr>
</table>
<br />
<div id="auto"></div>
</body>
</html>
1.服务器端代码：
（1）AutoCompleteServlet.java源代码：
Java代码
package servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 接收客户端请求
* @author 大鹏
*/
public class AutoCompleteServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//表示页面传过来的字符串，用于和服务器端的单词进行完整匹配
String word = request.getParameter("word");
//将字符串保存在request作用域中
request.setAttribute("word", word);
//将请求转发给视图层(注意AJAX,这个所谓的视图层不返回页面，只返回数据，所以也可以称作一个数据层)
request.getRequestDispatcher("wordxml.jsp").forward(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
（2）wordxml.jsp源代码：
Jsp代码
<!-- 与传统应用的视图层不同，这个jsp返回的是xml的数据，因此contentType的值是text/xml -->
<%@ page import="java.util.*" contentType="text/xml; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!-- 返回xml数据的"视图层"暂时不做任何逻辑，先将所有单词都返回，
待前后台应用可以协作之后，再限制返回的内容 -->
<%
//页面段传送的字符串
String word = (String)request.getAttribute("word");
String[] words = {"absolute", "anyone", "anything", "apple", "abandon", "breach", "break", "boolean"};
request.setAttribute("list", Arrays.asList(words));
%>
<words>
<c:forEach items="${list}" var="aWord">
<c:if test="${fn:startsWith(aWord, word)}">
<word><c:out value="${aWord}"></c:out></word>
</c:if>
</c:forEach>
</words>
2.客户端程序
（1）JQueryAuto.html源代码
Html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jqueryauto.js"></script>
<title>JQuery实例5：仿Google Suggest自动补齐</title>
</head>
<body>
自动补完实例：<input type="text" id="word" />
<input type="button" value="提示" /><br />
<div id="auto"></div>
</body>
</html>
（2）jqueryauto.js源代码：
Js代码
$(document).ready(function() {
//下拉列表框的块标记
var autoNode = $("#auto");
var wordInput = $("#word");
//表示当前高亮的节点
var highlightindex = -1;
var timeoutId;
//获取匹配元素在当前视口的相对偏移。
//返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
var wordInputOffset = wordInput.offset();
//自动补全框开始应该隐藏起来
autoNode.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 == 48){
//1.首先获取文本框中的内容
var wordText = wordInput.val();
//如果内容不为空
if (wordText != "") {
//对上次未完成的延时操作进行取消
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
$.post("AutoCompleteServlet", {word:wordText}, function(data) {
//将dom对象data转换成JQuery的对象
var jqueryObj = $(data);
//找到所有的word节点
var wordNodes = jqueryObj.find("word");
//需要清空auto的内容
autoNode.html("");
//遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中
wordNodes.each(function(i) {
//获取单词内容
var wordNode = $(this);
//新建div节点，将单词内容加入到新建的节点中
//将新建的节点加入到弹出框的节点中
var newDivNode = $("<div>");
newDivNode.html(wordNode.text()).appendTo(autoNode);
//鼠标进入事件，高亮节点
newDivNode.mouseover(function() {
// 将原来的结果取消高亮
if (highlightindex != -1) {
autoNode.children("div").eq(highlightindex)
.css("background-color", "white");
}
//记录新的高亮索引
highlightindex = i;
//鼠标进入的节点高亮
$(this).css("background-color", "red");
});
//增加鼠标移出事件，取消当前节点的高亮
newDivNode.mouseout(function() {
//取消鼠标移出节点的高亮
$(this).css("background-color", "white");
});
//增加鼠标点击事件，可以进行补齐
newDivNode.click(function() {
//取出高亮节点的文本内容
var comText = autoNode.hide().children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#word").val(comText);
});
});
//如果服务器没有数据返回，则显示弹出框
if(wordNodes.length > 0) {
autoNode.show();
} else {
autoNode.hide();
}
},"xml");
}, 200);
} else {
autoNode.hide();
//弹出框隐藏的同时，高亮节点索引值也置为-1
highlightindex = -1;
}
} else if (keyCode == 38 || keyCode == 40) {
// 如果输入的是向上38向下40按键
if (keyCode == 38) {
//向上
var autoNodes = autoNode.children("div");
if (highlightindex != -1) {
//如果原来存在高亮节点，则将背景色改成白色
autoNodes.eq(highlightindex).css("background-color", "white");
highlightindex --;
}
if (highlightindex == -1) {
//如果修改索引值以后index变成-1,则将索引值指向最后一个元素
highlightindex = autoNodes.length -1;
}
//让现在高亮的内容变成红色
autoNodes.eq(highlightindex).css("background-color", "red");
} else {
//向下
var autoNodes = autoNode.children("div");
if (highlightindex != -1) {
//如果原来存在高亮节点，则将背景色改成白色
autoNodes.eq(highlightindex).css("background-color", "white");
}
highlightindex ++;
if (highlightindex == autoNodes.length) {
//如果修改索引值以后index变成节点的长度,则将索引值指向第一个元素
highlightindex = 0;
}
//让现在高亮的内容变成红色
autoNodes.eq(highlightindex).css("background-color", "red");
}
} else if (keyCode == 13) {
// 如果输入的是回车
// 下拉框有高亮内容
if (highlightindex != -1) {
//取出高亮节点的文本内容
var comText = autoNode.hide().children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#word").val(comText);
} else {
//下拉框没有高亮内容
alert("文本框中的[" + wordInput.val() + "]被提交了");
autoNode.hide();
//让文本框失去焦点
wordInput.get(0).blur();
}
}
});
$("input[type='button']").click(function() {
alert("文本框中的[" + wordInput.val() + "]被提交了");
});
});
好了，现在所有的代码已经完成，看一下运行效果吧。
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 自动完成功能(优化版)</title>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
</head>
<body>
<script type="text/javascript">
var highlightindex = -1;//表示当前高亮节点
var timeoutId;
$(document).ready(function() {
var wordInput = $("#word");//文本框
var wordInputwordInputOffset = 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() + 3 + "px");
wordInput.keyup(function(event) {
//处理文本框中的键盘事件
//如果输入字母，将文本框中最新信息发送给服务器
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;//获得键值
if (keyCode == 27) {
var wordText = $("#word").val();
autoHide();
wordInput.text(wordText);
}
else {
if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) { //8对应退格键，46对应删除键
var wordText = $("#word").val();//获得文本框中的内容
var autoNode = $("#auto");
if (wordText != "") {
clearTimeout(timeoutId);//对上次未完成的延时操作进行取消
//延时操作，减少与服务器的交互次数，延时500ms，防止用户操作过快
timeoutId = setTimeout(function() {
$.post("AutoCompleteServlet", {word:wordText}, function(data) {//发送数据，第二项是属性名对应属性值
var jqueryObj = $(data);//将dom对象data转换成jQuery的对象
var wordNodes = jqueryObj.find("word");//找到所有word节点
autoNode.html("");
wordNodes.each(function(i) { //i是索引，用来给id赋值
var wordNode = $(this);//获取单词内容
var newDivNode = $("<div>").attr("id", i).css("backgroundColor", "white");
newDivNode.html(wordNode.text()).appendTo(autoNode);//新建div节点，加入单词内容
//增加鼠标进入事件，高亮节点
newDivNode.mouseover(function() {
//将原来高亮的节点取消高亮
if (highlightindex != -1) {
$("#auto").children("div").eq(highlightindex)
.css("backgroundColor", "white");
}
//记录新的高亮索引
highlightindex = $(this).attr("id");
$(this).css("backgroundColor", "#3366CC").css("cursor","pointer");
});
//增加鼠标移出事件，取消节点高亮
newDivNode.mouseout(function() {
if (keyCode == 13) { //判断是否按下回车键
//下拉框有高亮
if (highlightindex != -1) {
lightEventHide();
highlightindex = -1;
} else {
alert("文本框中的[" + $("#word").val() + "]被提交了");
autoHide();
$("#word").get(0).blur();//让文本框失去焦点
}
//取消鼠标移出节点的高亮
//$(this).css("backgroundColor", "white");
}
}
);
//增加鼠标点击事件,可以进行补全
newDivNode.click(function() {
//取出高亮节点的文本内容
var comText = $(this).text();
autoHide();
highlightindex = -1;
//文本框内容变为高亮节点内容
$("#word").val(comText);
});
});
//添加单词内容到弹出框
if (wordNodes.length > 0) {
autoNode.show();
} else {
autoNode.hide();
highlightindex = -1;//弹出框隐藏，高亮节点索引设成-1
}
}, "xml");
}, 300);
}
else
{
autoNode.hide();
highlightindex = -1;
}
} else if (keyCode == 38 || keyCode == 40) { //判断是否输入的是向上38向下40按键
if (keyCode == 38) {
var autoNodes = $("#auto").children("div").css("background-color", "white");
if (highlightindex != -1) {
autoNodes.eq(highlightindex).css("background-color", "white");
highlightindex--;
} else {
lightEvent();
highlightindex = autoNodes.length - 1;
}
if (highlightindex == -1) {
highlightindex = autoNodes.length - 1;//如果改变索引值后index变成-1，则将索引值指向最后一个元素
}
lightEvent();
autoNodes.eq(highlightindex).css("backgroundColor", "#3366CC");
}
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;//如果改变索引值等于最大长度，则将索引值指向第一个元素
}
lightEvent();
autoNodes.eq(highlightindex).css("backgroundColor", "#3366CC");
}
} else if (keyCode == 13) { //判断是否按下回车键
//下拉框有高亮
if (highlightindex != -1) {
lightEventHide();
highlightindex = -1;
} else {
alert("文本框中的[" + $("#word").val() + "]被提交了");
$("#auto").hide();
$("#word").get(0).blur();//让文本框失去焦点
}
//下拉框没有高亮
}
}
}
)
;
$("input[type='button']").click(function() {
alert("文本框中的[" + $("#word").val() + "]被提交了");
});
});
function lightEventHide(){
var comText = $("#auto").hide().children("div").eq(highlightindex).text();
$("#word").val(comText);
}
function lightEvent(){
var comText = $("#auto").children("div").eq(highlightindex).text();
$("#word").val(comText);
}
function autoHide(){
$("#auto").hide();
}
</script>
<h3>
<center>施杨 仿google自动补全(jQuery优化版)</center>
</h3>
<br />
<table align="center">
<tr><td>
<input type="text" id="word" maxlength=2048 size=55 />
<br/>
<td></tr>
<tr><td align="center">
<input type="button" value="shiyang 搜索"/>
</td></tr>
</table>
<br />
<div id="auto"></div>
</body>
</html>
jquery实例5:仿Google Suggest自动补齐
1.服务器端代码：（1）AutoCompleteServlet.java源代码：
Java代码
package servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 接收客户端请求
* @author 大鹏
*/
public class AutoCompleteServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//表示页面传过来的字符串，用于和服务器端的单词进行完整匹配
String word = request.getParameter("word");
//将字符串保存在request作用域中
request.setAttribute("word", word);
//将请求转发给视图层(注意AJAX,这个所谓的视图层不返回页面，只返回数据，所以也可以称作一个数据层)
request.getRequestDispatcher("wordxml.jsp").forward(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
（2）wordxml.jsp源代码：
Jsp代码
<!-- 与传统应用的视图层不同，这个jsp返回的是xml的数据，因此contentType的值是text/xml -->
<%@ page import="java.util.*" contentType="text/xml; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!-- 返回xml数据的"视图层"暂时不做任何逻辑，先将所有单词都返回，
待前后台应用可以协作之后，再限制返回的内容 -->
<%
//页面段传送的字符串
String word = (String)request.getAttribute("word");
String[] words = {"absolute", "anyone", "anything", "apple", "abandon", "breach", "break", "boolean"};
request.setAttribute("list", Arrays.asList(words));
%>
<words>
<c:forEach items="${list}" var="aWord">
<c:if test="${fn:startsWith(aWord, word)}">
<word><c:out value="${aWord}"></c:out></word>
</c:if>
</c:forEach>
</words>
2.客户端程序
（1）JQueryAuto.html源代码
Html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jqueryauto.js"></script>
<title>JQuery实例5：仿Google Suggest自动补齐</title>
</head>
<body>
自动补完实例：<input type="text" id="word" />
<input type="button" value="提示" /><br />
<div id="auto"></div>
</body>
</html>
（2）jqueryauto.js源代码：
Js代码
$(document).ready(function() {
//下拉列表框的块标记
var autoNode = $("#auto");
var wordInput = $("#word");
//表示当前高亮的节点
var highlightindex = -1;
var timeoutId;
//获取匹配元素在当前视口的相对偏移。
//返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
var wordInputOffset = wordInput.offset();
//自动补全框开始应该隐藏起来
autoNode.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 == 48){
//1.首先获取文本框中的内容
var wordText = wordInput.val();
//如果内容不为空
if (wordText != "") {
//对上次未完成的延时操作进行取消
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
$.post("AutoCompleteServlet", {word:wordText}, function(data) {
//将dom对象data转换成JQuery的对象
var jqueryObj = $(data);
//找到所有的word节点
var wordNodes = jqueryObj.find("word");
//需要清空auto的内容
autoNode.html("");
//遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中
wordNodes.each(function(i) {
//获取单词内容
var wordNode = $(this);
//新建div节点，将单词内容加入到新建的节点中
//将新建的节点加入到弹出框的节点中
var newDivNode = $("<div>");
newDivNode.html(wordNode.text()).appendTo(autoNode);
//鼠标进入事件，高亮节点
newDivNode.mouseover(function() {
// 将原来的结果取消高亮
if (highlightindex != -1) {
autoNode.children("div").eq(highlightindex)
.css("background-color", "white");
}
//记录新的高亮索引
highlightindex = i;
//鼠标进入的节点高亮
$(this).css("background-color", "red");
});
//增加鼠标移出事件，取消当前节点的高亮
newDivNode.mouseout(function() {
//取消鼠标移出节点的高亮
$(this).css("background-color", "white");
});
//增加鼠标点击事件，可以进行补齐
newDivNode.click(function() {
//取出高亮节点的文本内容
var comText = autoNode.hide().children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#word").val(comText);
});
});
//如果服务器没有数据返回，则显示弹出框
if(wordNodes.length > 0) {
autoNode.show();
} else {
autoNode.hide();
}
},"xml");
}, 200);
} else {
autoNode.hide();
//弹出框隐藏的同时，高亮节点索引值也置为-1
highlightindex = -1;
}
} else if (keyCode == 38 || keyCode == 40) {
// 如果输入的是向上38向下40按键
if (keyCode == 38) {
//向上
var autoNodes = autoNode.children("div");
if (highlightindex != -1) {
//如果原来存在高亮节点，则将背景色改成白色
autoNodes.eq(highlightindex).css("background-color", "white");
highlightindex --;
}
if (highlightindex == -1) {
//如果修改索引值以后index变成-1,则将索引值指向最后一个元素
highlightindex = autoNodes.length -1;
}
//让现在高亮的内容变成红色
autoNodes.eq(highlightindex).css("background-color", "red");
} else {
//向下
var autoNodes = autoNode.children("div");
if (highlightindex != -1) {
//如果原来存在高亮节点，则将背景色改成白色
autoNodes.eq(highlightindex).css("background-color", "white");
}
highlightindex ++;
if (highlightindex == autoNodes.length) {
//如果修改索引值以后index变成节点的长度,则将索引值指向第一个元素
highlightindex = 0;
}
//让现在高亮的内容变成红色
autoNodes.eq(highlightindex).css("background-color", "red");
}
} else if (keyCode == 13) {
// 如果输入的是回车
// 下拉框有高亮内容
if (highlightindex != -1) {
//取出高亮节点的文本内容
var comText = autoNode.hide().children("div").eq(highlightindex).text();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#word").val(comText);
} else {
//下拉框没有高亮内容
alert("文本框中的[" + wordInput.val() + "]被提交了");
autoNode.hide();
//让文本框失去焦点
wordInput.get(0).blur();
}
}
});
$("input[type='button']").click(function() {
alert("文本框中的[" + wordInput.val() + "]被提交了");
});
});
好了，现在所有的代码已经完成，看一下运行效果吧。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 仿Google首页搜索自动补全
- 仿 Google首页搜索自动补全
- 仿Google首页搜索自动补全！（原创分享jQuery版）
- 仿Google首页搜索自动补全！（原创分享jQuery版）
- google 搜索引擎，ajax 自动补全搜索
- jquery-autocomplete搜索关键字自动补全效果(类似于google)
- 模拟Google首页(dwr实现ajax) 弹出补全搜索结果
- 模拟Google首页(dwr实现ajax) 弹出补全搜索结果
- 利用redis完成自动补全搜索功能（三）
- C# Asp.Net自动调用百度搜索页面baidu/google搜索页面
- Bash中自动补全时忽略大小写,Up，Down来搜索以该串字符开头的历史命令(.inputrc)
- solr入门之拼音加汉字方式的搜索建议自动补全的不高效实现
- Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
- Chrome右键/地址栏搜索自动跳转到google.com.hk解决办法
- JqueryUI AutoComplate实现文本框搜索，自动补全效果
- google搜索自动提示下拉菜单
- google首页源码,自动提示功能的研究
- 百度搜索结果自动跳转到百度首页的解决办法
- 自动补全的字典树搜索
- jquery实现自动提示的文本框（仿baidu,google搜索)