好久没有继续看AJAX的视频教程了,今天就将最后一个教程案例做完。我们在搜索引擎中输入文字时文本框下会提示对应的信息，这个案例就是实现这样的基本功能，代码比較粗糙还须要进一步完好，当中有些地方也须要向大神们请教一下。完毕效果截图：
一、事先代码准备工作：
1. JQueryAutoComplete.html负责页面端的显示
a) 截图例如以下：
b) 代码例如以下：
<!DOCTYPE html> <html><head><title>自己主动补全演示样例</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="jslib/jQuery.js"></script> <span style="white-space:pre"> </span><script type="text/javascript" src="jslib/jqueryauto.js"></script><!--<link rel="stylesheet" type="text/css" href="./styles.css">--></head><body>补全演示样例：<span style="white-space:pre"> </span><input type="text" id="word"/><span style="white-space:pre"> </span><input type="button" value="提交"/><br/><span style="white-space:pre"> </span><div id="auto"></div></body> </html>c) 注：页面端HTML代码基本上在后面的编写中不会改变。
2. jqueryauto.js负责对页面元素进行更改
3. wordxml.jsp存储信息推荐的XML数据
a) 初始代码例如以下（后期需改动）：
<!-- 这个JSP返回的是XML数据，contentType的值是text/xml --> <%@ pagelanguage="java" contentType="text/xml; charset=UTF-8"pageEncoding="utf-8"%> <!-- 返回XML数据，将全部数据都返回，等待后台能够完整协作后再限制返回内容 --> <words><word>absolute</word><word>anyone</word><word>anything</word><word>apple</word><word>abandon</word><word>breach</word><word>break</word><word>boolean</word> </words>
4. AutoComplete.java后台Servlet
a) 初始代码例如以下（为了简单起见Servlet不会进行推断操作。所以后面基本上也不会进行更改）：
import java.io.IOException; importjavax.servlet.RequestDispatcher; importjavax.servlet.ServletException; importjavax.servlet.http.HttpServlet; importjavax.servlet.http.HttpServletRequest; importjavax.servlet.http.HttpServletResponse; /*** @author Ginger* 补全内容后台代码*接收用户请求*/ public class AutoCompleteextends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponseresp)throws ServletException, IOException {String word=req.getParameter("word"); // 将字符串保存在request对象中req.setAttribute("word", word); // 请求转发到视图层RequestDispatchertemp=req.getRequestDispatcher("wordxml.jsp");temp.forward(req, resp);}@Overrideprotected void doPost(HttpServletRequest req,HttpServletResponse resp)throws ServletException, IOException {doGet(req, resp);} }
二、接下来我们就对jqueryauto.js进行编写
代码的功能能够依据功能和先后顺序分为：
1. 设置推荐文字弹出框auto的样式：
2. 设置button的点击事件：
3. 为输入文本框加入键盘事件
a) 键盘事件分对当按下字母键、上下键、回车键时进行处理：
i. 字母键：向后台提交文本框数据
ii. 上下键：设置推荐文本被高亮的效果
iii. 回车键：模拟button被点击的效果
4. 终于代码
//表示当前高亮的节点 var highlightindex=-1; $(document).ready(function(){ // 依据输入框设置弹出框的样式var wordInput=$("#word");var wordInputOffset=wordInput.offset();//隐藏自己主动补全div框$("#auto").hide().css("border","1pxblack solid").css("position","absolute") .css("top",wordInput.height()+wordInputOffset.top+"px").css("left",wordInputOffset.left+"px").width(wordInput.width());// 为文本框加入键盘按下并弹起事件$("#word").keyup(function(event){ // 处理文本框中的键盘事件 // 假设输入字母、退格键、删除键，则将信息发送到server var myEvent=event || window.event;var keyCode=myEvent.keyCode;if(keyCode>=65&&keyCode<=90 || keyCode==8 ||keyCode==46){// 1.首先获取文本框内容var wordText=$("#word").val();// 2.将内容发送给server(文本不为空的情况下才发送数据)var autoNode=$("#auto");if(wordText!=""){$.post("AutoComplete",{word:wordText},function(data){// 2.1转换dom对象为JQuery对象var jqueryObj=$(data);// 2.2找到全部word节点varwordNodes=jqueryObj.find("word");// 2.3遍历全部word节点。取出单词内容，加入到auto弹出框中// 每次提交数据前清空补全框数据autoNode.html("");$(wordNodes).each(function(i){// 获取单词内容var wordNode=$(this); // 将节点加入到弹出框中 autoNode.append($("<div>").html(wordNode.text()));});if(wordNodes.length >0){autoNode.show();}else{autoNode.hide();} },"xml");}else{autoNode.hide(); // 隐藏弹出框同一时候重置高亮值highlightindex=-1;}}else if(keyCode==38 || keyCode==40){ // 假设输入上下button，则补全内容会被选中if(keyCode==38){ // 向上 // 找到当前补全框的全部子节点varautoNodes=$("#auto").children("div");if(highlightindex!=-1){ // 假设原来存在高亮节点。则将背景改为白色autoNodes.eq(highlightindex).css("background-color","white").css("color","black");highlightindex--;}else{highlightindex=autoNodes.length-1;}if(highlightindex==-1){ // 假设改动索引值后index变成-1，则将索引值指向最后一个元素highlightindex=autoNodes.length-1;}autoNodes.eq(highlightindex).css("background-color","blue").css("color","white");}if(keyCode==40){ // 向下 // 找到当前补全框的全部子节点varautoNodes=$("#auto").children("div");if(highlightindex!=-1){ // 假设原来存在高亮节点。则将背景改为白色autoNodes.eq(highlightindex).css("background-color","white").css("color","black");}highlightindex++;if(highlightindex==autoNodes.length){ // 假设改动索引值后index变成-1，则将索引值指向最后一个元素highlightindex=0;}autoNodes.eq(highlightindex).css("background-color","blue").css("color","white");} }else if(keyCode==13){// 假设输入回车// 补全框中有选中内容if(highlightindex!=-1){varautoNodes=$("#auto").children("div");// 将高亮文本赋给输入框$("#word").val(autoNodes.eq(highlightindex).text());highlightindex=-1;$("#auto").hide();alert("已提交。");}else{// 补全框中没有选中内容alert("已提交。");$("#auto").hide();}}}); // 为button添加点击事件$("input[type='button']").click(function(){alert("已提交。");}) });
三、最后是在后台进行数据的筛选
终于wordxml.jsp代码为
<!-- 这个JSP返回的是XML数据，contentType的值是text/xml --> <%@ pagelanguage="java" contentType="text/xml; charset=UTF-8"pageEncoding="utf-8"%> <!-- 返回XML数据，将全部数据都返回，等待后台能够完整协作后再限制返回内容 --> <%String word=(String)request.getAttribute("word"); %> <words><% if("absolute".startsWith(word)){ %><word>absolute</word><%}%><% if("anyone".startsWith(word)){ %><word>anyone</word><%}%><% if("anything".startsWith(word)){ %><word>anything</word><%}%><% if("apple".startsWith(word)){ %><word>apple</word><%}%><% if("abandon".startsWith(word)){ %><word>abandon</word><%}%><% if("breach".startsWith(word)){ %><word>breach</word><%}%><% if("break".startsWith(word)){ %><word>break</word><%}%><% if("boolean".startsWith(word)){ %><word>boolean</word><%}%> </words>
Author:事始Sign：仅仅要你还在尝试。
就不算失败。
