用jquery仿google动态补全简单例子

//表示当前高亮的节点 var highlightindex = -1; var timeoutId; $(document).ready(function(){ //文本框节点 var wordInput = $("#word"); var wordInputOffset = wordInput.offset(); var autoNode = $("#auto"); //自动补全框最开始应该隐藏,找到前台的id为auto的节点设置隐藏 $("#auto").hide().css("border","1px black solid").css("position","absolute") .css("top",wordInputOffset.top + wordInput.height()+ 5 + "px") .css("left",wordInputOffset.left + 2 + "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); timoutId = setTimeout(function(){ //2.将文本框的内容发给服务器,服务器将数据返回data此时被服务器赋值 $.post("AutoComplete",{word:wordText},function(data){ //将dom对象data转换成jquery的对象,直接$(data)就行 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(){ //取出高亮节点文本内容 var comText = $(this).text(); highlightindex = -1; //将文本框内容设置为高亮节点的文本 $("#word").val(comText); //选择后隐藏下拉框 $("#auto").hide(); }); }); //如果服务器端有数据返回，则显示弹出框 否则 隐藏 if(wordNodes.length > 0){ autoNode.show(); }else{ autoNode.hide(); } },"xml"); },500); }else{ autoNode.hide(); //弹出框隐藏 高亮节点 置成负一 highlightindex = -1; } }else if(keyCode == 38 || keyCode == 40){ //如果输入的是向上向下按键 if(keyCode == 38){ //找到服务器列出的节点 var autoNodes = $("#auto").children("div"); if(highlightindex != -1){ //如果存在高亮节点，则将背景改成白色 eq方法可以查找索引节点 autoNodes.eq(highlightindex).css("background-color","white"); highlightindex --; }else{ highlightindex = autoNodes.length - 1; } if(highlightindex == -1){ //如果修改索引以后index变成-1，则将索引只向最后一个元素 highlightindex = autoNodes.length - 1; } //现在让高亮内容变成红色 autoNodes.eq(highlightindex).css("background-color","red"); } if(keyCode == 40){ var autoNodes = $("#auto").children("div"); if(highlightindex != -1){ //如果存在高亮节点，则将背景改成白色 eq方法可以查找索引节点 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").children("div").eq(highlightindex).text(); highlightindex = -1; //将文本框内容设置为高亮节点的文本 $("#word").val(comText); }else{ //下拉框没有高亮内容 alert("文本框中的["+$("#word").val()+"]被提交了"); $("#auto").hide();//隐藏下拉div //让文本框失去焦点 $("#word").get(0).blur(); } } }); //给按钮添加事件,表示文本框的数据被提交 $("input[type='button']").click(function(){ alert("文本框中的["+$("#word").val()+"]被提交了"); }); });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>自动补全页面前台</title> <mce:script type="text/javascript" src="jslib/jquery-1.5.2.js" mce_src="jslib/jquery-1.5.2.js"></mce:script> <mce:script type="text/javascript" src="jslib/jqueryauto.js" mce_src="jslib/jqueryauto.js"></mce:script> </head> <body> 请在这里如入内容<input type="text" id="word" /> <input type="button" value="提交" /> <br /><br /><br /> <div id="auto"> </div> </body> </html> jsp <%-- 与传统的视图层不同，这个jsp返回的是xml的数据，因此contenttype的值是text/xml 返回xml数据的"视图层"暂时不做任何逻辑判断，先将所有单词都返回，传前后台应用可以完整的写作之后再限制返回的内容。 --%> <%@ page contentType="text/xml;charset=UTF-8" language="java" %> <% String word = (String)request.getAttribute("word"); %> <words> <word>absolute</word> <word>anyone</word> <word>anything</word> <word>apple</word> <word>abandon</word> <word>breach</word> <word>boolean</word> </words>

import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.ServletException; import java.io.IOException; /** * Created by IntelliJ IDEA. * User: sony * Date: 2011-5-11 * Time: 13:16:34 * To change this template use File | Settings | File Templates. * 接受用户端请求 */ public class AutoComplete extends HttpServlet{ @Override protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { doGet(httpServletRequest, httpServletResponse); //To change body of overridden methods use File | Settings | File Templates. } @Override protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { //接受页面传来的参数 String word = httpServletRequest.getParameter("word"); //将字符串保存回request对象中 httpServletRequest.setAttribute("word",word); //将请求转发给视图层(ajax的返回只是数据 而不是页面) httpServletRequest.getRequestDispatcher("wordxml.jsp").forward(httpServletRequest,httpServletResponse); } }