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即可！
注意：下面源代码是基于前几课的基础上的，所以里面有前几课所以的内容！