好久没有继续看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 { @Override protected 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); } @Override protected 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：仅仅要你还在尝试。
就不算失败。