AJAX学习小结（九）-Jquery实例：仿googlesuggest自动补全功能 _Ajax

AJAX学习总结（九）---Jquery实例：仿googlesuggest自动补全功能

步骤1.新建项目JqueryTrain

步骤2.导入Jquery类库，并放在jslib文件下；导入包：jstl.jar和standard.jar,注意要是1.1版本的

步骤3.新建servlet

package servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import bean.Word;
/**
 * 接收用户端请求
 */
public class AutoComplete extends HttpServlet {

	private static final long serialVersionUID = -298323094323211685L;

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//表示页面传过来的字符串，用于和服务器端的单词进行完整匹配
		String wds = request.getParameter("word");
		
		
		//声明一个数组，存我们要用到的单词
		String[] words = {"absolute","anyone","anything","apple","abandon","breach","break","boolean","banana"};
		List<Word> list = new ArrayList<Word>();
		for(String wd : words){
			if(wd.startsWith(wds)){
				Word word = new Word();
				word.setWord(wd);
				list.add(word);
			}
		}
		
		
		//将字符串保存在request对象中
		request.setAttribute("list", list);
		//将请求转发给视图层（注意AJAX中，这个所谓的视图层不返回页面，只返回数据）
		request.getRequestDispatcher("wordxml.jsp").forward(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}

?web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
    <servlet-name>GetStocksInfo</servlet-name>
    <servlet-class>servlet.GetStocksInfo</servlet-class>
  </servlet>
  <servlet>
    <servlet-name>AutoComplete</servlet-name>
    <servlet-class>servlet.AutoComplete</servlet-class>
  </servlet>


  <servlet-mapping>
    <servlet-name>GetStocksInfo</servlet-name>
    <url-pattern>/GetStocksInfo</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>AutoComplete</servlet-name>
    <url-pattern>/AutoComplete</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

步骤4.新建bean

package bean;

public class Word {
	private String word;

	public String getWord() {
		return word;
	}

	public void setWord(String word) {
		this.word = word;
	}
	
}

步骤4.5新建jsp文件---wordxml.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- 与传统应用的视图层不同，这个jsp返回的是xml的数据，因此contentType的值是text/xml -->
<words>
	<c:forEach items="${list}" var="word">
		<word>${word.word}</word>
	</c:forEach>
	<!--word>abc</word>
	<word>add</word>
	<word>age</word>
	<word>a</word>
	<word>b</word  -->
</words>

步骤5.新建html文件---JqueryAutoComplete.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Jquery实例：仿googelSuggest</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    
    <script type="text/javascript" src="jslib/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jslib/jqueryauto.js"></script>
  </head>
  <body>
     仿googlesuggest：<input type="text" id="word"/>
  	 <input type="button" value="提交"/>
  	 <div id="auto"></div>
  </body>
</html>

步骤6.新建js文件---jqueryauto.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() + 6 + "px")
					.css("left",wordInputOffset.left).width(wordInput.width()+ 6 + "px");
	
	//给文本框添加键盘按下并弹起的事件
	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.将文本框中的内容发送给服务器端
				//对上次未完成的延时操作进行取消
				clearTimeout(timeoutId);
				//对于服务器端进行交互延迟500ms，避免快速打字造成的频繁请求
				timeoutId = setTimeout(function(){
					$.post("AutoComplete",{word:wordText},function(data){
						//将dom对象data转换成Jquery的对象
						var jqueryObj = $(data);
						//找到所有的word节点
						var wordNodes = jqueryObj.find("word");
						//遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中
						//需要清空原来的内容
						autoNode.html("");
						wordNodes.each(function(i){
							//获取单词内容
							var wordNode = $(this);
							//新建div节点，将单词内容加入到新建节点中
							//将新建的节点加入到弹出框的节点中
							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(){
								//取出高亮节点的内容
								var comText = $(this).text();
								$("#auto").hide();
								highlightindex = -1;
								//文本框中的内容变成高亮节点的内容
								$("#word").val(comText);
							});
						});
						//如果服务器端有数据返回，则显示弹出框
						if(wordNodes.length > 0){
							autoNode.show();
						}else{
							autoNode.hide();
							//弹出框隐藏时，高亮节点索引值也置成-1
							highlightindex = -1
						}
					},"xml");
				},500);
				
				
			}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变成-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){
					//如果修改索引值以后highlightindex变成-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() + "]被提交！");
				$("#auto").hide();
				//让文本框失去焦点
				$("#word").get(0).blur();
			}
			
		}
	});
	
	//给按钮挺添加事件，表示文本框中的数据被提交
	$("input[type='button']").click(function() {
		alert("文本框中的[" + $("#word").val() + "]被提交！");
	});
})

然后运行http://localhost:8080/JqueryTrain/JqueryAutoComplete.html即可！

注意：下面源代码是基于前几课的基础上的，所以里面有前几课所以的内容！