JqueryAutoComplete.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Jquery autoComplete</title> <meta http-equiv="Content-Type" content="text/html;gb2312"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jqueryautocomplete.js"></script> </head> <body> <h3>Jquery autoComplete</h3> 用Jquery实现模仿Google 搜索提示功能 <input type="text" id="word" size="20"/> <input type="button" value="提交"/><br> <div id="auto"></div> </body> </html>
jqueryautocomplete.js
// 显示高亮对应的数组的索引 var highlightindex = -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() + 2 + "px"); //键盘事件 $("#word").keyup(function(event) { var myEvent = event || window.event; //获取当前键值 var keyCode = myEvent.keyCode; // 按下字母键和退格、delete键 if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) { var wordText = $("#word").val(); var autoNode = $("#auto"); //只有输入框中有值时才向服务器发送请求 if (wordText != "") { //取消上次未完成的操作 clearTimeout(timeOutId); //对服务器的请求延迟200ms timeOutId = setTimeout(function(){ $.post("AutoComplete", {word:wordText}, function(data) { //将dom对象转化为jquery对象 var jqueryObj = $(data); //找到所有的word节点 var wordNodes = jqueryObj.find("word"); //遍历前清空原来的内容 autoNode.empty(); wordNodes.each(function(i) { var wordNode = $(this); 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()); highlightindex = -1; $("#auto").hide(); }); }); if (wordNodes.length > 0) { autoNode.show(); } else { autoNode.hide(); highlightindex = -1; } }, "xml"); },200); } else { autoNode.hide(); highlightindex = -1; } } // 按下上下键 else if (keyCode == 38 || keyCode == 40) { //按下向上键后 if (keyCode == 38) { //取得提示框中的各个div var autoNodes = $("#auto").children("div"); if (highlightindex != -1) { //如果当前有高亮节点，则把该高亮节点背景色变为非高亮背景色 autoNodes.eq(highlightindex).css("background-color", "white"); highlightindex --; } else { highlightindex = autoNodes.length - 1; } if (highlightindex == -1) { highlightindex = autoNodes.length - 1; } autoNodes.eq(highlightindex).css("background-color", "red"); } //按下向下键后 if (keyCode == 40) { var autoNodes = $("#auto").children("div"); if (highlightindex != -1) { //如果当前有高亮节点，则把该高亮节点背景色变为非高亮背景色 autoNodes.eq(highlightindex).css("background-color", "white"); highlightindex ++; } else { highlightindex = 0; } if (highlightindex == autoNodes.length) { highlightindex = 0; } autoNodes.eq(highlightindex).css("background-color", "red"); } } // 按下回车 else if (keyCode == 13) { if (highlightindex != -1) { var conText = $("#auto").hide().children("div").eq(highlightindex).text(); highlightindex = -1; $("#word").val(conText); } else { alert("文本框中的内容【" + $("#word").val() + "】被提交了"); $("#auto").hide(); $("#word").blur(); } } }); $("input[type='button']").click(function() { alert("文本框中的内容【" + $("#word").val() + "】被提交了"); }); });AutoComplete.java(别忘了在web.xml里面配置哦！)
import com.sun.deploy.net.HttpRequest; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpServlet; import javax.servlet.ServletException; import java.io.IOException; /** * Created by IntelliJ IDEA. * User: Administrator * Date: 2008-9-24 * Time: 21:39:17 * To change this template use File | Settings | File Templates. */ public class AutoComplete extends HttpServlet { protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { String word = httpServletRequest.getParameter("word"); httpServletRequest.setAttribute("word", word); httpServletRequest.getRequestDispatcher("wordxml.jsp").forward(httpServletRequest, httpServletResponse); // httpServletResponse.sendRedirect("wordxml.jsp"); } protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { doGet(httpServletRequest, httpServletResponse); } }wordxml.jsp
<%@ page contentType="text/xml;charset=UTF-8" language="java" %> <% String word = (String)request.getAttribute("word"); %> <words> <% if(("absolute").startsWith(word)){ %> <word>absolute</word> <%}%> <% if(("apple").startsWith(word)){ %> <word>apple</word> <%}%> <% if(("anything").startsWith(word)){ %> <word>anything</word> <%}%> <% if(("anybody").startsWith(word)){ %> <word>anybody</word> <%}%> <% if(("body").startsWith(word)){ %> <word>body</word> <%}%> <% if(("bobo").startsWith(word)){ %> <word>bobo</word> <%}%> <% if(("baby").startsWith(word)){ %> <word>baby</word> <%}%> <% if(("cut").startsWith(word)){ %> <word>cut</word> <%}%> <% if(("cetuegte").startsWith(word)){ %> <word>cetuegte</word> <%}%> </words>