(本文转自:http://daishuanglong.iteye.com/blog/788199)
- 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);
- }
- }
- 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>
- <!-- 与传统应用的视图层不同,这个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>
- <!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() + "]被提交了");
- });
- });
- $(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() + "]被提交了");
- });
- });
- 好了,现在所有的代码已经完成,看一下运行效果吧。