好久没有继续看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. 设置按钮的点击事件：
3. 为输入文本框添加键盘事件
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：只要你还在尝试。就不算失败。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
