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