`

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

    博客分类：
  • AJAX
GooglejQueryCSSJSPXML 
阅读更多
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("");				
							//循环输出wordNodes
							wordNodes.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就show
							if(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){
					//设置CSS
					autoNodes.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>


分享到：
| Struts表单数据与ActionForm的转换
评论
1 楼 chinalian 2013-03-07  
谢谢，总结的很清晰。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics