<html> <head> <title>My JSP 'autocomplete.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <mce:script type="text/javascript" src="jquery-1.3.2.js" mce_src="jquery-1.3.2.js"></mce:script> <mce:script type="text/javascript"><!-- $.get("http://localhost:8080/jquery/servlet/AutoCompleteServlet?param=c",function(data){$("txt1").value=data;}); var hightlight =-1; var oInputField; //考虑到很多函数中都要使用 var oPopDiv; //因此采用全局变量的形式 var oconUl; function initVars(){ //初始化变量 oInputField = $("#txt1"); oPopDiv = $("#popup"); oconUl = $("#con_ul"); $(document).click ( function(event) { clearcon(); } ); } function clearcon(){ //清除提示内容 oconUl.empty(); oPopDiv.removeClass("show1"); } function setcon(the_con){ //显示提示框,传入的参数即为匹配出来的结果组成的数组 clearcon(); //每输入一个字母就先清除原先的提示,再继续 oPopDiv.addClass("show1"); for(var i=0;i<the_con.length;i++) //将匹配的提示结果逐一显示给用户 oconUl.append($("<li>"+the_con[i]+"</li>")); oconUl.find("li").click(function(){ oInputField.val($(this).text()); clearcon(); }).hover( function(){$(this).addClass("mouseOver");}, function(){$(this).removeClass("mouseOver");} ); } function findcon(event){ initVars(); //初始化变量 var myEvent = event || window.event; var keycode = myEvent.keyCode; //获取键盘键值 if ((keycode >= 65 && keycode <= 90) || keycode==8 || keycode == 46 || (keycode > 48 && keycode < 57)) { if(oInputField.val().length > 0){ //获取异步数据 var url="servlet/AutoCompleteServlet?param="+oInputField.val(); $.get(url,function(data){ var aResult = new Array(); if(data.length > 0){ aResult = data.split(","); setcon(aResult); //显示服务器结果 } else clearcon(); }); } else{ clearcon(); //无输入时清除提示框(例如用户按del键) hightlight = -1 } }else if(keycode==38||keycode==40){ //如果输入的是向上向下 if(keycode==38){ //向上 var autoNodes = oconUl.find("li"); if (hightlight != -1 ){ //把高亮节点恢复 autoNodes.eq(hightlight).removeClass("mouseOver"); hightlight--; }else{ hightlight = autoNodes.length - 1 } if(hightlight == -1){ //如果到顶 把高亮移动到最后 hightlight = autoNodes.length - 1; }; autoNodes.eq(hightlight).addClass("mouseOver"); } if(keycode==40){ //向下 var autoNodes =oconUl.find("li"); if (hightlight != -1 ){ //把高亮节点恢复 autoNodes.eq(hightlight).removeClass("mouseOver"); } hightlight++; if(hightlight == autoNodes.length){ //如果到顶 把高亮移动到最后 hightlight = 0; } autoNodes.eq(hightlight).addClass("mouseOver"); } }else if (keycode==13){ //如果输入的是回车 if(hightlight!=-1){ //取出节点的内容 var context = oconUl.find("li").eq(hightlight).text(); clearcon(); hightlight = -1; oInputField.val(context); } } } // --></mce:script> <mce:style><!-- body { font-family: Arial; font-size: 14px; padding: 0px; margin: 10px; } .txt1 { /* 用户输入框的样式 */ width: 200px; } #popup { /* 提示框div块的样式 */ position: absolute; left: 204px; top: 32px; width: 204px; /*border:solid 1px black;*/ color: #004a7e; } #popup.show1 { /* 显示提示框的边框 */ border: 1px solid #004a7e; } ul { list-style: none; margin: 0px; padding: 0px; color: #004a7e; } li.mouseOver { background-color: #004a7e; color: #FFFFFF; } --></mce:style><style mce_bogus="1"> body { font-family: Arial; font-size: 14px; padding: 0px; margin: 10px; } .txt1 { /* 用户输入框的样式 */ width: 200px; } #popup { /* 提示框div块的样式 */ position: absolute; left: 204px; top: 32px; width: 204px; /*border:solid 1px black;*/ color: #004a7e; } #popup.show1 { /* 显示提示框的边框 */ border: 1px solid #004a7e; } ul { list-style: none; margin: 0px; padding: 0px; color: #004a7e; } li.mouseOver { background-color: #004a7e; color: #FFFFFF; } </style> </head> <body> <div id="con"> Please Input Your Charactors: <input id="txt1" type="text" class="txt1" οnkeyup="findcon();" /> </div> <div id="popup"> <ul id="con_ul" class="show1"></ul> </div> <div id="divResult"> </div> </body> </html> package com.stf.web.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class AutoCompleteServlet 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 { response.setContentType("text/plain"); String str = request.getParameter("param"); PrintWriter out = response.getWriter(); if (str.length() == 0) { return; } String result = ""; String[] name = new String[] { "a", "b", "c", "d", "e", "f", "g", "a2", "b2", "c2", "d2", "e2", "f2", "g2", "a3", "b3", "c3", "d3", "e3", "f3", "g3", "a4", "b4", "c4", "d4", "e24", "f4", "g4" }; for (int i = 0; i < name.length; i++) { if (name[i].indexOf(str) == 0) result += name[i] + ","; } if (result.length() > 0) // 如果有匹配项 { result = result.substring(0, result.length() - 1); // 去掉最后的“,”号 } out.print(result); out.flush(); out.close(); } }