用Jquery实现模仿Google 搜索提示功能

最新推荐文章于 2019-06-27 03:04:21 发布

weixin_33828101

最新推荐文章于 2019-06-27 03:04:21 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

文章标签： java 开发工具 web.xml

原文链接：http://blog.51cto.com/huqianhao/955056

本文介绍如何使用 JQuery 实现类似 Google 的搜索提示功能。通过 Ajax 向服务器发送请求，获取匹配项并实时展示给用户。文章详细介绍了 HTML 结构、JS 交互逻辑及后端处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JqueryAutoComplete.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jquery autoComplete</title>
<meta http-equiv="Content-Type" content="text/html;gb2312">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryautocomplete.js"></script>
</head>
<body>
<h3>Jquery autoComplete</h3>
用Jquery实现模仿Google 搜索提示功能
<input type="text" id="word" size="20"/>
<input type="button" value="提交"/><br>
<div id="auto"></div>
</body>
</html>

jqueryautocomplete.js

// 显示高亮对应的数组的索引
var highlightindex = -1;
//提示延迟
var timeOutId;
$(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 + "px");
//键盘事件
$("#word").keyup(function(event) {
var myEvent = event || window.event;
//获取当前键值
var keyCode = myEvent.keyCode;
// 按下字母键和退格、delete键
if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) {
var wordText = $("#word").val();
var autoNode = $("#auto");
//只有输入框中有值时才向服务器发送请求
if (wordText != "") {
//取消上次未完成的操作
clearTimeout(timeOutId);
//对服务器的请求延迟200ms
timeOutId = setTimeout(function(){
$.post("AutoComplete", {word:wordText}, function(data) {
//将dom对象转化为jquery对象
var jqueryObj = $(data);
//找到所有的word节点
var wordNodes = jqueryObj.find("word");
//遍历前清空原来的内容
autoNode.empty();
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(){
$("#word").val( $(this).text());
highlightindex = -1;
$("#auto").hide();
});
});
if (wordNodes.length > 0) {
autoNode.show();
} else {
autoNode.hide();
highlightindex = -1;
}
}, "xml");
},200);
}
else {
autoNode.hide();
highlightindex = -1;
}
}
// 按下上下键
else if (keyCode == 38 || keyCode == 40) {
//按下向上键后
if (keyCode == 38) {
//取得提示框中的各个div
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 ++;
} else {
highlightindex = 0;
}
if (highlightindex == autoNodes.length) {
highlightindex = 0;
}
autoNodes.eq(highlightindex).css("background-color", "red");
}
}
// 按下回车
else if (keyCode == 13) {
if (highlightindex != -1) {
var conText = $("#auto").hide().children("div").eq(highlightindex).text();
highlightindex = -1;
$("#word").val(conText);
} else {
alert("文本框中的内容【" + $("#word").val() + "】被提交了");
$("#auto").hide();
$("#word").blur();
}
}
});
$("input[type='button']").click(function() {
alert("文本框中的内容【" + $("#word").val() + "】被提交了");
});
});

AutoComplete.java(别忘了在web.xml里面配置哦！)

import com.sun.deploy.net.HttpRequest;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServlet;
import javax.servlet.ServletException;
import java.io.IOException;
/**
* Created by IntelliJ IDEA.
* User: Administrator
* Date: 2008-9-24
* Time: 21:39:17
* To change this template use File | Settings | File Templates.
*/
public class AutoComplete extends HttpServlet {
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
String word = httpServletRequest.getParameter("word");
httpServletRequest.setAttribute("word", word);
httpServletRequest.getRequestDispatcher("wordxml.jsp").forward(httpServletRequest, httpServletResponse);
// httpServletResponse.sendRedirect("wordxml.jsp");
}
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
}