好久没有继续看AJAX的视频教程了,今天就将最后一个教程案例做完。我们在搜索引擎中输入文字时文本框下会提示相应的信息，这个案例就是实现这种基本功能，代码比较粗糙还需要进一步完善，其中有些地方也需要向大神们请教一下。完成效果截图：
一、事先代码准备工作：
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>
2. jqueryauto.js负责对页面元素进行更改
3. wordxml.jsp存储信息推荐的XML数据
<!-- 这个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. 设置按钮的点击事件：
a)键盘事件分对当按下字母键、上下键、回车键时进行处理：
i.字母键：向后台提交文本框数据
ii.上下键：设置推荐文本被高亮的效果
iii.回车键：模拟按钮被点击的效果
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){ // 处理文本框中的键盘事件 // 如果输入字母、退格键、删除键，则将信息发送到服务器 var myEvent=event || window.event; var keyCode=myEvent.keyCode; if(keyCode>=65&&keyCode<=90 || keyCode==8 ||keyCode==46){ // 1.首先获取文本框内容 var wordText=$("#word").val(); // 2.将内容发送给服务器(文本不为空的情况下才发送数据) 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){ // 如果输入上下按钮，则补全内容会被选中 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","black"); } highlightindex++; if(highlightindex==autoNodes.length){ // 如果修改索引值后index变成-1，则将索引值指向最后一个元素 highlightindex=0; } autoNodes.eq(highlightindex).css("background-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(); } } }); // 为按钮增加点击事件 $("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：只要你还在尝试。就不算失败。
