Jquery模仿Google Suggest基于js的动态下拉菜单
JSP页面
JS文件
Servlet后台代码
JSP输的XML
<%@ 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>