Jquery模仿Google Suggest基于js的动态下拉菜单

langhua9527 · 发表于 2013-1-29 07:37:56

JSP页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>JqueryAutoComplete</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"> </head> <script type="text/javascript" src="../javascript/jquery.js"></script> <script type="text/javascript" src="../javascript/auto.js"></script> <body> Google Suggest <input id="word" type="text"> <input type="button" value="Click"><br/> <div id="auto"></div> </body></html>
JS文件
//全局变量，高亮的信息-1表示没有选中var highlightindex = -1;//延时处理var timeout;$(document).ready(function(){var wordInput = $("#word");//获得JQUERY封装的一个对象var wordInputOffset = wordInput.offset();//设置DIV为隐藏，并设置边框属性$("#auto").hide().css("border","1px black solid") .css("position","absolute") //input离上面的长度+input的高（宽） .css("top",wordInputOffset.top+wordInput.height()+5+"px") //input高左面的的长度 .css("left",wordInputOffset.left+"px") //input的宽度 .width(wordInput.width()+6+"px");//添加事件$("#word").keyup(function(event){var myEvent = event || window.event;var myKeyCode = myEvent.keyCode;//给页面的DIV做一个缓存var div = $("#auto");//获得文件框里面的值if(myKeyCode>64 && myKeyCode<91 || myKeyCode==8 || myKeyCode==46){var wordText = $("#word").val();if(wordText!=""){//延时操作clearTimeout(timeout);timeout = setTimeout(function(){//和服务器端交互，第四个参数设置返回是XML数据$.post("../servlet/AutoComplete",{word:wordText},function(data){//万能的$获得XML数据var xmlobj = $(data);//找到其中的WORD标签var wordNodes = xmlobj.find("word");div.html("");//循环输出wordNodeswordNodes.each(function(i){//$(this)表示当前的WORD字段var wordNode = $(this);//创建 DIV并,设值，再添加到页面的DIV上.(还可以属性attr("value",text); )var newDiv = $("<div>").attr("id",i);newDiv.html(wordNode.text()).appendTo(div);newDiv.mouseover(function(){if(highlightindex!=-1){$("#auto").children("div").eq(highlightindex).css("background-color","white");}highlightindex = $(this).attr("id");$(this).css("background-color","blue");});newDiv.mouseout(function(){$(this).css("background-color","white");});newDiv.click(function(){$("#auto").hide();var textClick = $("#auto").children("div").eq(highlightindex).text();highlightindex = -1;$("#word").val(textClick);});});//如果返回的wordNodes长度大于0就showif(wordNodes.length > 0){div.show();}else{div.hide();highlightindex = -1;}},"xml");},1000);}else{//如果文本信息为空就隐藏div.hide();highlightindex = -1;}//键盘向上向下键}else if(myKeyCode == 38 || myKeyCode ==40){//向上if(myKeyCode == 38){//获得ID为auto里面的DIV对象var autoNodes = $("#auto").children("div");//如果没有被选中if(highlightindex != -1){//设置CSSautoNodes.eq(highlightindex).css("background-color","white");highlightindex--;}else{highlightindex = autoNodes.length - 1;}autoNodes.eq(highlightindex).css("background-color","blue");}//向下if(myKeyCode == 40){var autoNodes = $("#auto").children("div");if(highlightindex != -1){autoNodes.eq(highlightindex).css("background-color","white");highlightindex++;}else{highlightindex++;}if(highlightindex == autoNodes.length){highlightindex = 0;}autoNodes.eq(highlightindex).css("background-color","blue");}//回车键}else if(myKeyCode ==13){if(highlightindex!=-1){//获得选中的那个的文本值var textInputText = $("#auto").children("div").eq(highlightindex).text();highlightindex = -1;$("#word").val(textInputText);$("#auto").hide();}else{alert("提交服务器");$("#auto").hide();//失去焦点$("#word").get(0).blur();}}});//获得一个input对象，并且他的type属性为button$("input[type='button']").click(function(){alert("提交服务器");});});
Servlet后台代码
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html;charset=utf-8");request.setCharacterEncoding("utf-8");String word = request.getParameter("word");System.out.println(i++);request.setAttribute("word",word);request.getRequestDispatcher("../jqueryexample/wordxml.jsp").forward(request, response);}
JSP输的XML
<%@ page language="java" contentType="text/xml; charset=utf-8" pageEncoding="UTF-8"%><words><word><%=request.getAttribute("word")%></word><word>anyone</word><word>ant</word><word>apple</word><word>浪花</word><word>break</word><word>book</word><word>boolean</word><word>blue</word></words>

		自动登录	找回密码
密码			立即注册