jquery自动补全例子
一、JqueryAutoComplete.html? 页面
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>页面的自动补全</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery.js"> </script><script type="text/javascript" src="js/jquertAutoFill.js"></script> </head> <body> 请输入你想查找的内容：<input type="text" id="word"/> <input type="button" value="提交"/><br /> <div id="auto"></div> </body></html>
?
二、jquertAutoFill.js 文件
?
//jquery自动补全//定义全局变量var highlightindex = -1; //表示高亮的节点var timeoutId;//表示延向服务器发送请的时间/*Ajax 自动补全*///注册页面装在时执行的方法$(document).ready(function () {//得到文本框对象var wordInput = $("#word");//得到文本框距离屏幕左边距和上边的距离var wordInputOffset = wordInput.offset();//自动补全框最开始隐藏起来//添加样式必须现价 css("position","absolute")属性$("#auto").hide().css("border", "1px black solid").css("position", "absolute").css("top", wordInputOffset.top + wordInput.height() + 6 + "px").css("left", wordInputOffset.left + "px").width(wordInput.width() + 2);//给文本框添加键盘按下并弹起的事件$("#word").keyup(function (event) {//处理文本框中的键盘事件//得到弹出框对象var autoNode = $("#auto");//得到当前按键的code值var myEvent = event || window.evnet;var keyCode = myEvent.keyCode;//如果输入的是字母，应该将文本框最新的信息发送给服务器//如果输入的是退格键或删除键，也应该将文本框的信息发送给服务器if (keyCode >= 65 || keyCode <= 90 || keyCode == 8 || keyCode == 46) {//1、首先获取文本框的内容var wordText = $("#word").val();//文本内容不为空才将文本框内容发给服务器if (wordText != "") {//2、将文本框的内容发给服务器//对上次未执行的延时做清除操作clearTimeout(timeoutId);//对服务器端进行交互延迟500ms,避免快速打字造成的频繁请求timeoutId = setTimeout(function(){$.post("AutomaticFillServlet", {word:wordText}, function (data) {//将dom对象data转换成JQuery的对象var jqueryobj = $(data);//找到所有word节点var wordNodes = jqueryobj.find("word");//遍历所有的word节点，取出单词内容，然后将单词内容添加到弹出框中//清空div里原来的内容autoNode.html("");wordNodes.each(function (i) {//获取单词var wordNode = $(this);//新建div节点,将单词内容加入到新建的节点中//将新建的节点加入到弹出框的节点中var newDivNode = $("<div>").attr("id",i);newDivNode.html(wordNode.text()).appendTo(autoNode);//添加鼠标进入事件,高亮节点newDivNode.mouseover(function(){//将原来高亮的节点取消if(highlightindex != -1){$("#auto").children("div").eq(highlightindex).css("background-color","white");}//记录新的高亮节点highlightindex = $(this).attr("id");$(this).css("background-color","red");});//鼠标移出，取消高亮newDivNode.mouseout(function(){//取消节点的高亮$(this).css("background-color","white");});//鼠标补全newDivNode.click(function(){//文本框的内容变成高亮显示的内容$("#word").val($(this).text());//隐藏弹出窗体$("#auto").hide();});});//如果服务服务器端有数据,则显示弹出框if (wordNodes.length > 0) {autoNode.show();} else {autoNode.hide();//弹出框隐藏时没有高亮显示的节点highlightindex = -1;}}, "xml");},500); } else {autoNode.hide();//弹出框隐藏时没有高亮显示的节点highlightindex = -1;}} else if(keyCode == 38) {//向上键//得到弹出框的所有子节点var autoNodes = $("#auto").children("div");if(highlightindex != -1){//如果原来存在高亮显示节点，则将背景色改为白色autoNodes.eq(highlightindex).css("background-color","white");//将highlightindex等于零的情况单独拿出来处理if(highlightindex == 0){highlightindex = autoNodes.length - 1;}else{highlightindex--;}}else{highlightindex = autoNodes.length - 1;}//让现在高亮的内容变成红色autoNodes.eq(highlightindex).css("background-color","red");}else if(keyCode == 40){ //向下键//得到弹出框的所有子节点var autoNodes = $("#auto").children("div");if(highlightindex != -1){//如果原来存在高亮显示节点，则将背景色改为白色autoNodes.eq(highlightindex).css("background-color","white");}highlightindex++;if(highlightindex == autoNodes.length){highlightindex = 0;}//让现在高亮的内容变成红色autoNodes.eq(highlightindex).css("background-color","red");}else if (keyCode == 13) {//如果输入的是回车if(highlightindex != -1){//取出高亮显示下拉框的内容var comText = $("#auto").hide().children("div").eq(highlightindex).text();//文本框的内容变成高亮显示的内容$("#word").val(comText);highlightindex = -1;}else{ var obj = $("#word"); var count = obj.val();obj.val("");alert("文本框中的[" + count + "]被提交了");//让文本框失去焦点obj.get(0).blur();}}});//给按钮添加事件，表示文本框中的数据被提交$("input[type='button']").click(function () {alert("\u6587\u672c\u6846\u4e2d\u7684[" + $("#word").val + "]\u88ab\u63d0\u4ea4\u4e86");});});?
三、AutomaticFillServlet.java 类
?
package serverlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * 自动补全 * 向客服端返XML数据的servlet * @author Administrator * */@SuppressWarnings("serial")public class AutomaticFillServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{//获得页面传过来的字符串String word = request.getParameter("word");//将字符串保存在request对象中request.setAttribute("word",word);//将请求转发给视图层（注意Ajax中，这个所谓的视图层不返回页面，只返回数据,所以也可以称作是一个数据层）//将"wordxml.jsp"处理后的数据发给 "JqueryAutoComplete.html"页面request.getRequestDispatcher("wordxml.jsp").forward(request, response);}public void init() throws ServletException{}public void destroy(){super.destroy(); }}?
四、wordxml.jsp? 文件
?
?
<%--自动补全的Ajax实例--%><%@ page contentType="text/xml; charset=UTF-8" language="java" %><!-- 返回xml数据的“视图层”暂时不做任何逻辑判断,先将所有的单词都返回、待前后台应用可以完整的协作后，在限制返回的内容 --><%//页面端传送的字符串String word = (String)request.getParameter("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("abandin".startsWith(word)){%><word>abandin</word><% } if("breach".startsWith(word)){%><word>breach</word><% } if("break".startsWith(word)){ %><word>break</word><% } if("bad".startsWith(word)){%><word>bad</word><%}%></words>