1.servlet中
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String word = request.getParameter("word");
request.setAttribute("word", word);
System.out.println("dd");
request.getRequestDispatcher("testXml.jsp").forward(request, response);
}
2.建一个xml文件(testXml.jsp)
<%@ page contentType="text/xml;charset=utf-8" language="java"%>
<words>
<word>aafdfds</word>
<word>afdgwe</word>
<word>aewgsdf</word>
<word>agwefsd</word>
<word>aaafdsf</word>
<word>afewtge</word>
<word>bbsfa</word>
<word>bbfsf</word>
<word>bfsfs</word>
</words>
3.Html文件
<%@ page language="java" imp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./jQuery/css/test.css">
<script type="text/javas
<script type="text/javas
<style type="text/css">
div{
table-layout: auto;
}
</style>
</head>
<!-- 实现仿GoogleSuggest自动补全的功能 -->
<body>
<input type="text" id="word"/>
<input type="button" value="提交"/>
<div id="auto"></div>
</body>
</html>
4.建一个js文件(test_8.js)
var currIndex = -1;
$(function(){
var timeInterval;
var word = $("#word");
//设置样式
$("#auto").css("border","1px solid black")
.css("position","absolute")
.css("top",word.offset().top+word.height()+1+"px")
.css("left",word.offset().left+"px")
.css("width",word.width()+"px")
.hide();
//添加键盘事件
word.keyup(function(e){
var e = e || window.event;
//如查输入的是字母或退格或删除
if(e.keyCode >= 65 && e.keyCode <= 90 || e.keyCode == 8 || e.keyCode == 46){
var auto = $("#auto");
auto.html("");
auto.hide();
currIndex = -1;
var value = word.val();
//清除事件
clearTimeout(timeInterval);
if(value != ""){
//延迟发送
timeInterval = setTimeout(ajaxPost,500);
}
}else if(e.keyCode == 38 || e.keyCode == 40){
//向上或向下
if(e.keyCode == 38){//向上
var divs = $("#auto > div");
if(currIndex != -1){
divs.eq(currIndex).css("background-color","white");
}
currIndex--;
if(currIndex == -1){
currIndex = divs.length - 1;
}
divs.eq(currIndex).css("background-color","red");
}
if(e.keyCode == 40){//向下
var divs = $("#auto > div");
if(currIndex != -1){
divs.eq(currIndex).css("background-color","white");
}
currIndex++;
if(currIndex == divs.length){
currIndex = 0;
}
divs.eq(currIndex).css("background-color","red");
}
}else if(e.keyCode == 13){
//回车
//alert("dd");
var divs = $("#auto > div");
var value = divs.eq(currIndex).text();
$("#word").val(value);
$("#auto").hide();
currIndex = -1;
}
});
$("input[type='button']").click(function(){
alert("文本框中的内容是："+word.val());
});
});
function ajaxPost(){
var value = $("#word").val();
var auto = $("#auto");
$.post("Test8Servlet",{word:value},function(da
//得到所有的word节点
var words = $(da
words.each(function(w){
var wdiv = $("<div>").attr("id",w);
wdiv.html($(this).text()).appendTo(auto);
//添加鼠标事件
wdiv.mouseover(function(){
if(currIndex != -1){
divs = $("#auto > div").eq(currIndex).css("background-color","white");
}
currIndex = this.id;
$(this).css("background-color","red");
});
wdiv.mouseout(function(){
$(this).css("background-color","white");
});
wdiv.click(function(){
$("#word").val($(this).text());
$("#auto").hide();
currIndex = -1;
});
});
//alert(words.length);
if(words.length > 0){
auto.show();
}else{
auto.hide();
currIndex = -1;
}
},"xml");
}
扫一扫
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
