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

Mr.Cheney

浏览: 221947 次
性别:
来自: 武汉

最近访客更多访客>>

wyk525

Union365

q4421

wuxia_2001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

Google jQuery CSS JSP 应用服务器

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源代码：

<!-- 与传统应用的视图层不同，这个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源代码

<!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();
				//弹出框隐藏的同时，高亮节点索引值也置为-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() + "]被提交了");
	});
	
});

好了，现在所有的代码已经完成，看一下运行效果吧。