jquery实例5:仿Google Suggest自动补齐

sxpujs · 发表于 2013-2-6 08:42:40

1.服务器端代码：
（1）AutoCompleteServlet.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源代码：
<%@ 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" %><%//页面段传送的字符串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源代码
<!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源代码：
$(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();//弹出框隐藏的同时，高亮节点索引值也置为-1highlightindex = -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() + "]被提交了");});});
好了，现在所有的代码已经完成，看一下运行效果吧。

		自动登录	找回密码
密码			立即注册