jQuery入门学习九：仿GoogleSuggest .

最新推荐文章于 2024-07-12 10:54:36 发布

秦地小哥

最新推荐文章于 2024-07-12 10:54:36 发布

阅读量411

点赞数

分类专栏：前台资料文章标签： jquery autocomplete function 服务器 div ajax

前台资料专栏收录该内容

6 篇文章 0 订阅

订阅专栏

http://blog.csdn.net/jubincn/article/details/4539597

本文的内容基本来自itcast上的视频教程，所用示例也基本是那上面的例子

GoogleSuggest是一种搜索框常用的技术，也是Ajax的典型应用之一。这个功能看上去挺容易实现，可要实现的漂亮，还是要费一些功夫。要实现一个比较完整的Google Suggest功能，一般要实现下面这些功能：

获得用户在搜索框获取焦点的动作
响应每一个keyup事件，包括退格和回车
根据搜索框中的内容与后台进行交互，获得结果，放到一个tooltip里面
当用户用鼠标选择或者用键盘上移，下移键进行操作时，响应用户操作，并且当上移出界时，要返回到底部
当用户点击搜索或按回车时，要消除搜索框

这些只是对功能的大概描述，要真正实现这些功能，恐怕还有很多未知的问题要解决。使用jQuery可以帮助我们更轻松地实现这些功能，使用jQuery来做Google Suggest的步骤如下：

创建一个html页面，包括一个输入框和一个div，这个div正是用来做tooltip的

[xhtml] view plain copy print ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>itcast.cn的JQuery示例：仿googlesuggest</title>
<mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
<mce:script type="text/javascript" src="jslib/jqueryauto.js" mce_src="jslib/jqueryauto.js"></mce:script>
</head>
<body>
itcast.cn的JQuery示例：仿googlesuggest<input type="text" id="word" />
<input type="button" value="提交" /><br /><br /><br />
<div id="auto"></div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>itcast.cn的JQuery示例：仿googlesuggest</title> <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script> <mce:script type="text/javascript" src="jslib/jqueryauto.js" mce_src="jslib/jqueryauto.js"></mce:script> </head> <body> itcast.cn的JQuery示例：仿googlesuggest<input type="text" id="word" /> <input type="button" value="提交" /><br /><br /><br /> <div id="auto"></div> </body> </html>

创建服务器端对请求的响应文件，核心是返回一个xml文件

AutoComplete.java

[java] view plain copy print ?

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
/**
* Created by IntelliJ IDEA.
* User: ming
* Date: 2008-6-14
* Time: 14:17:00
* 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");
//将字符串保存在request对象中
httpServletRequest.setAttribute("word",word);
//将请求转发给视图层（注意AJAX中，这个所谓的视图层不返回页面，只返回数据，所以也可以称作使一个数据层）
httpServletRequest.getRequestDispatcher("wordxml.jsp").
forward(httpServletRequest, httpServletResponse);
}
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse); //To change body of overridden methods use File | Settings | File Templates.
}
}

import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.ServletException; import java.io.IOException; /** * Created by IntelliJ IDEA. * User: ming * Date: 2008-6-14 * Time: 14:17:00 * 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"); //将字符串保存在request对象中 httpServletRequest.setAttribute("word",word); //将请求转发给视图层（注意AJAX中，这个所谓的视图层不返回页面，只返回数据，所以也可以称作使一个数据层） httpServletRequest.getRequestDispatcher("wordxml.jsp"). forward(httpServletRequest, httpServletResponse); } protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { doGet(httpServletRequest, httpServletResponse); //To change body of overridden methods use File | Settings | File Templates. } }

wordxml.jsp

[xhtml] view plain copy print ?

<%--
itcast.cn的ajax自动补全实例
--%>
<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<words>
<word>absolute</word>
<word>anyone</word>
<word>anything</word>
<word>apple</word>
<word>abandon</word>
<word>breach</word>
<word>break</word>
<word>boolean</word>
</words>

<%-- itcast.cn的ajax自动补全实例 --%>  <%@ page contentType="text/xml;charset=UTF-8" language="java" %>  <words> <word>absolute</word> <word>anyone</word> <word>anything</word> <word>apple</word> <word>abandon</word> <word>breach</word> <word>break</word> <word>boolean</word> </words>

创建js来实现GoogleSuggest功能

[javascript] view plain copy print ?

//表示当前高亮的节点
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) {
//1.首先获取文本框中的内容
var wordText = $("#word").val();
var autoNode = $("#auto");
if (wordText != "") {
//2.将文本框中的内容发送给服务器段
$.post("AutoComplete",{word:wordText},function(data){
//将dom对象data转换成JQuery的对象
var jqueryObj = $(data);
//找到所有的word节点
var wordNodes = jqueryObj.find("word");
//遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中
//需要清空原来的内容
autoNode.html("");
wordNodes.each(function() {
//获取单词内容
var wordNode = $(this);
//新建div节点，将单词内容加入到新建的节点中
//将新建的节点加入到弹出框的节点中
$("<div>").html(wordNode.text()).appendTo(autoNode);
});
//如果服务器段有数据返回，则显示弹出框
if (wordNodes.length > 0) {
autoNode.show();
} else {
autoNode.hide();
//弹出框隐藏的同时，高亮节点索引值也制成-1
highlightindex = -1;
}
},"xml");
} else {
autoNode.hide();
highlightindex = -1;
}
} else if (keyCode == 38 || keyCode == 40) {
//如果输入的是向上38向下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) {
//如果修改索引值以后index变成-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) {
//如果修改索引值以后index变成-1，则将索引值指向最后一个元素
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() + "]被提交了");
}
}
});
//给按钮添加事件，表示文本框中的数据被提交
$("input[type='button']").click(function() {
alert("文本框中的[" + $("#word").val() + "]被提交了");
});
})

//表示当前高亮的节点 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) { //1.首先获取文本框中的内容 var wordText = $("#word").val(); var autoNode = $("#auto"); if (wordText != "") { //2.将文本框中的内容发送给服务器段 $.post("AutoComplete",{word:wordText},function(data){ //将dom对象data转换成JQuery的对象 var jqueryObj = $(data); //找到所有的word节点 var wordNodes = jqueryObj.find("word"); //遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中 //需要清空原来的内容 autoNode.html(""); wordNodes.each(function() { //获取单词内容 var wordNode = $(this); //新建div节点，将单词内容加入到新建的节点中 //将新建的节点加入到弹出框的节点中 $("<div>").html(wordNode.text()).appendTo(autoNode); }); //如果服务器段有数据返回，则显示弹出框 if (wordNodes.length > 0) { autoNode.show(); } else { autoNode.hide(); //弹出框隐藏的同时，高亮节点索引值也制成-1 highlightindex = -1; } },"xml"); } else { autoNode.hide(); highlightindex = -1; } } else if (keyCode == 38 || keyCode == 40) { //如果输入的是向上38向下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) { //如果修改索引值以后index变成-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) { //如果修改索引值以后index变成-1，则将索引值指向最后一个元素 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() + "]被提交了"); } } }); //给按钮添加事件，表示文本框中的数据被提交 $("input[type='button']").click(function() { alert("文本框中的[" + $("#word").val() + "]被提交了"); }); })

里面用了jQuery的几个很好用的函数，分别是：

创建节点：$("<div>")
追加节点：appendTo()

秦地小哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门学习九：仿GoogleSuggest .

http://blog.csdn.net/jubincn/article/details/4539597 本文的内容基本来自itcast上的视频教程，所用示例也基本是那上面的例子 GoogleSuggest是一种搜索框常用的技术，也是Ajax的典型应用之一。这个功能看上去挺容易实现，可要实现的漂亮，还是要费一些功夫。要实现一个比较完整的Google Suggest功能，一般要实现下面这些功能...
复制链接

扫一扫