//定义全局变量
var hilgindex = -1;
var timeTmid;
$(document).ready(function () {
//先将DIV隐藏
var wordInput = $("#word");
var wordInputOffset = wordInput.offset();
$("#auto").hide().css("border", "1px black solid").css("position", "absolute")
.css("top", wordInputOffset.top + wordInput.height() + 1 + "px")
.css("left", wordInputOffset.left + "px").width(wordInput.width())
.css("font-size","14px").css("z-index","100").css("background-color","white");
//给文本框加键盘按下弹起事件
wordInput.keyup(function(event) {
//处理键盘事件 重点
//获取键盘按下的键
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//如果输入的是字母，应该将文本框最新的内容发送给服务器
//如果输入的是退格键 或 是DEL键 也应该将文本框最新的内容发送给服务器
if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) {
//1先获取文本狂的内容 并处理中文乱码问题 两次处理之后 能够在不同环境下 处理中文乱码问题
var wordText =$("#word").css("position", "relative").val();
var autoNode = $("#auto");
//2将文本框的内容发送到服务器
if (wordText != "") {
//清除上次未完成的延时操作
clearTimeout(timeTmid);
//d对服务端要延迟500ms 避免快速打字造成多次请求服务器
timeTmid = setTimeout(function() {
$.post("/xddshopping/Product?method=test", {word:wordText}, function(data) {
//将dom对象data转换成JQuery的对象
var jqueryObj = $(data);
//找到所有的word节点
var wordNodes = jqueryObj.find("word");
// alert(wordNodes+"=========")
//遍历所有word节点 取出数据，然后将数据填充到弹出框
//这里要清空原内容
autoNode.html("");
wordNodes.each(function(i) {
//取出数据
var wordNode = $(this);
//新建div节点 将数据添加到节点中
//将新建的节点添加到弹出框中
var newDivNode = $("<div>").css("margin-top","5px").css("text-align","left").attr("id", i);
newDivNode.html(wordNode.text()).appendTo(autoNode);
//增加鼠标事件 进入改变背景颜色
newDivNode.mouseover(function() {
//将原来的被选择的取消
if (hilgindex != -1) {
$("#auto").children("div").eq(hilgindex).css("background-color", "white")
}
//记录新的被选中
hilgindex = $(this).attr("id");
$(this).css("background-color", "gray");
});
//鼠标移出事件
newDivNode.mouseout(function() {
//取消被选中的
$(this).css("background-color", "white");
});
//增加鼠标点击事件
newDivNode.click(function() {
//取出被选中的内容
var comText = $(this).text();
$("#auto").hide();
hilgindex = -1;
//w文本狂的内容要变成所选的内容
$("#word").val(comText);
});
});
if (wordNodes.length > 0) {
autoNode.show();
} else {
//当弹出框隐藏式 被选择的内容应该为-1
autoNode.hide();
hilgindex = -1;
}
}, "xml");
}, 500)
} else {
autoNode.hide();
hilgindex = -1;
}
} else if (keyCode == 38) {
//如果按下的是向上键 38
var autoNodes = $("#auto").children("div")
if (hilgindex != -1) {
//如果没被选中 将内容的Div给白色
autoNodes.eq(hilgindex).css("background-color", "white");
hilgindex--;
} else {
hilgindex = autoNodes.length - 1;
}
if (hilgindex == -1) {
//如果到顶端 或到最下端 就-1
hilgindex = autoNodes.length - 1;
}
// 如果 正常 将被选择的的内容背景给灰色
autoNodes.eq(hilgindex).css("background-color", "gray")
var comText = $("#auto").children("div").eq(hilgindex).text();
$("#word").val(comText)
} else if (keyCode == 40) {
//向下的建 40
var autoNodes = $("#auto").children("div")
if (hilgindex != -1) {
//如果没被选中 将内容的Div给白色
autoNodes.eq(hilgindex).css("background-color", "white");
}
hilgindex++;
if (hilgindex == autoNodes.length) {
//如果到顶端 或到最下端 就-1
hilgindex = 0;
}
// 如果 正常 将被选择的的内容背景给灰色
autoNodes.eq(hilgindex).css("background-color", "gray")
var comText = $("#auto").children("div").eq(hilgindex).text();
$("#word").val(comText)
} else if (keyCode == 13) {
//如果输入的是回车
//下拉框有内容被选择
if (hilgindex != -1) {
//取出被选中的内容
var comText = $("#auto").hide().children("div").eq(hilgindex).text();
hilgindex = -1;
//w文本狂的内容要变成所选的内容
$("#word").val(comText)
} else {
//w文本狂的内容要变成所选的内容
alert("文本框的的值[" + $("#word").val() + "]被提交了")
$("#auto").hide();
//让文本框失去焦点
$("#word").get(0).blur();
}
}
});
//给按钮一个事件
$("input[name='secth']").click(function() {
var comText=encodeURI($("#word").val());
//alert(comText)
window.location.href='/xddshopping/Reveal?method=proname&pname='+comText;
});
});
2.autoxml.jsp文件内容 在这个文件中，我们只把他作为数据中转
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"
contentType="text/xml; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core">
<!--返回xml数据的-->
<words>
<c:forEach items="${requestScope.word}" var="pro">
<word>${pro}</word>
</c:forEach>
</words>
3.servlet的类调用业务类的方法
public void test(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setHeader("Cache-Control", "no-cache");
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
String word=request.getParameter("word");
PageUtil pageUtil=new PageUtil();
pageUtil.setPageno(1);
pageUtil.setPagesize(20);
word=StringUtil.concert(word);
ProductBiz.search(pageUtil, " pletter like '"+word+"%' or pname like '"+word+"%'");
List<ProductBean> list = pageUtil.getList();
List pro=new ArrayList();
String src=p.getPname();
pro.add(src);
}
request.setAttribute("word",pro);
request.getRequestDispatcher("/xml/xmlauto.jsp").forward(request,response);
}