1. 在MyEclipse中实现示例
Ø 在MyEclipse中新建一个webProject，命名为AjaxDemo
Ø 导入jquery框架，首先从网站上下载jquery，解压文件得到jquery的核心代码（jquery-1.4.2.min.js），在webRoot目录下新建一个jscode文件夹，将jquery-1.4.2.min.js代码copy到jscode文件夹下。
Ø 首先新建一个html页面，命名为JQueryAutoComplete.html,代码如下：
| DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>自动补全示例演示title> <script type="text/javascript" src="jscode/jquery-1.4.2.min.js">script> <script type="text/javascript" src="jscode/jqueryauto.js">script> head> <body> <center> <h2> 仿Google自动补全示例 h2> <input type="text" id="word" /> <input type="button" value="搜索" /> <br /> center> <div id="auto">div> body> html>
|
以上代码需要注意：首先要在html页面中引用jquery的代码：
| |
其次对于引入js代码的顺序要注意，先引入jquery代码，再引入自动补全的js实现代码
| |
并在web.xml文件配置：
| <servlet> <servlet-name>AutoCompleteservlet-name> <servlet-class>com.tlj.test.AutoCompleteservlet-class> servlet>
<servlet-mapping> <servlet-name>AutoCompleteservlet-name> <url-pattern>/AutoCompleteurl-pattern> servlet-mapping> |
Ø 在webRoot目录下新建一个jsp页面，命名为wordxml.jsp，其代码如下所示：
| <%@ page contentType="text/xml;charset=utf-8" language="java" %> <% String word=(String)request.getAttribute("word"); %> <words> <%if("absolute".startsWith(word)){%> <word>absoluteword> <%}%> <%if("anyone".startsWith(word)){%> <word>anyoneword> <%}%> <%if("anything".startsWith(word)){%> <word>anythingword> <%}%> <%if("apple".startsWith(word)){%> <word>appleword> <%}%> <%if("abandon".startsWith(word)){%> <word>abandonword> <%}%> <%if("breach".startsWith(word)){%> <word>breachword> <%}%> <%if("break".startsWith(word)){%> <word>breakword> <%}%> <%if("boolean".startsWith(word)){%> <word>booleanword> <%}%> words>
|
在这段代码中要注意处：第一句中contentType="text/xml;charset=utf-8"，其类型是xml类型。
Ø 自动补全的核心代码是其的js代码，在jscode文件夹下建立jqueryauto.js，代码如下所示：
| var hightlightindex = -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() + 5 + "px") .css("left", wordInputOffset.left + "px").width(wordInput.width()); //给文本框添加键盘按下的事件 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(); if (wordText != "") { clearTimeout(timeoutId); timeoutId = setTimeout(function () { $.post("AutoComplete", {word:wordText}, function (data) { var jqueryObj = $(data); //找到所有的word节点 var wordNodes = jqueryObj.find("word"); var autoNode = $("#auto"); //需要清空原来的内容 autoNode.html(""); wordNodes.each(function (i) { //获取单词内容 var wordNode = $(this); //新建div节点，将单词内容加入到新建的节点中 //将新建的节点加入到弹出框的节点中 var newDivNode = $(" newDivNode.html(wordNode.text()).appendTo(autoNode); newDivNode.mouseover(function () { if (hightlightindex != -1) { $("#auto").children("div").eq(hightlightindex) .css("background-color", "white"); } hightlightindex = $(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(); hightlightindex = -1; $("#word").val(comText); }); }); //如果服务器端有数据，则显示弹出框 if (wordNodes.length > 0) { autoNode.show(); } else { autoNode.hide(); hightlightindex = -1; } }, "xml"); }, 500); //2.将文本框中的内容发送给服务器 } else { autoNode.hide(); hightlightindex = -1; } } else { if (keyCode == 38 || keyCode == 40) { //输入是上下键 if (keyCode == 38) { //向上键 var autoNodes = $("#auto").children("div"); if (hightlightindex != -1) { autoNodes.eq(hightlightindex). css("background-color", "white"); hightlightindex--; } else { hightlightindex = autoNodes.length - 1; } if (hightlightindex == -1) { hightlightindex = autoNodes.length - 1; } autoNodes.eq(hightlightindex).css("background-color", "red"); } if (keyCode == 40) { //向下键 var autoNodes = $("#auto").children("div"); if (hightlightindex != -1) { autoNodes.eq(hightlightindex) .css("background-color", "white"); } hightlightindex++; if (hightlightindex == autoNodes.length) { hightlightindex = 0; } autoNodes.eq(hightlightindex).css("background-color", "red"); } } else { if (keyCode == 13) { //输入的是回车 if (hightlightindex != -1) { var comText = $("#auto").hide().children("div") .eq(hightlightindex).text(); hightlightindex = -1; $("#word").val(comText); } else { $("#auto").hide(); $("#word").get(0).blur(); } } } } }); }); |