**************************************************************************
1 :js
**************************************************************************
var nowline = -1;// 提示框的查看行号
$(document).ready(function() {$('#keyword').keyup(function(event) {
var keyword = $('#keyword').val();
if (keyword.length <= 0) {
nowline = -1;
return;
}
// 支持IE、FF
var keyCode = event.keycode || event.which || event.charCode;
if (keyCode != 40 && keyCode != 38 && keyCode != 13) {
$.ajax({
type : "POST",
url : "../searchCustomerByJQueryServlet",
data : "keyword=" + escape($('#keyword').val()),
success : doSuccess,
error : doError,
});
} else if (keyCode == 40) {// down
nowline++;
keymove();
} else if (keyCode == 38) {// up
nowline--;
keymove();
}
});
});
// 键盘up down 键按下时的处理
function keymove() {
var list = document.getElementsByTagName("li");
var size = list.length;
if (nowline < 0)
nowline = size - 1;
if (nowline >= size)
nowline = 0;
$("li").removeAttr("class");
$("#lid" + nowline).attr("class", "liclass");
$('#keyword').val($("#lid" + nowline).text());
}
// 返回成功时的处理
function doSuccess(data) {
if (data != "") {
var ss;
ss = data.split("@");
var layer = "<div ><ul>";
for ( var i = 0; i < ss.length - 1; i++) {
layer += "<li class='line' id='lid" + i + "'align='left'>" + ss[i]
+ "</li>";
}
layer += "</ul></div>";
$('#popup').empty();
$('#popup').html(layer);
$('#popup').css("display", "");
$('.line').click(function() {
$('#keyword').val($(this).text());
});
} else {
$('#popup').empty();
$('#popup').css("display", "none");
}
}
// 返回错误时的处理
function doError(XMLHttpRequest, textStatus, errorThrown) {
alert("status=" + XMLHttpRequest.status);
alert("readyState=" + XMLHttpRequest.readyState);
// alert("textStatus="+textStatus);
}
// 点击其它地方的时候 提示框消失
$(document).ready(function() {
$().click(function() {
$('#popup').empty();
$('#popup').css("display", "none");
});
});
**************************************************************************
2: html
**************************************************************************
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 防止缓存 -->
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="expires" CONTENT="0">
<link type="text/css" rel="stylesheet" href="../css/table2.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" language="javascript"
src="../js/searchCustomerByJQuery.js"></script>
<title>find customer by jquery</title>
<style>
#popup {
width: 182px;
position: absolute;
left: 530px;
top: 52px;
z-index: 1;
overflow: hidden;
border: #c5dadb 1px solid;
border-top: none;
cursor: default;
}
#popup li:hover {
background: #C4D1DE;
color: #DC1414;
}
ul,li {
padding-left: 1px;
font: 12px, '微软雅黑';
}
.liclass {
background: #C4D1DE;
color: #DC1414;
}
</style>
</head>
<body>
<div id="pos">您的位置:查找顾客 jquery>></div>
<form action="findCustomerByAjax.jsp" method="post" id="form">
<center>
<font color="blue" size="2">(提示: 输入顾客姓名 或 货号 )</font>: <input
type="text" size="25" id="keyword" name="keyword" autocomplete="off">
<div id="popup"></div>
<input type="image" src="../img/search.gif"
οnclick="javascript:document.getElementById('form').submit();">
</center>
</form>
</body>
**************************************************************************
3 servlet
**************************************************************************
doPost :protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("utf-8");String keyWord = request.getParameter("keyword").trim();
System.out.println("servlet -->keyword=" + keyWord);
// 设置输出信息的格式及字符集
response.setHeader("Cache-control", "no-cache");
// 创建输出流对象
PrintWriter out = response.getWriter();
CustomerManager cm = new CustomerManager();
Customer customer = null;
cm.findByKeyWord(keyWord);
List<Customer> clist = cm.findByKeyWord(keyWord);
int length = clist.size();
StringBuffer responseStr = new StringBuffer();
for (int i = 0; i < length; i++) {
customer = clist.get(i);
responseStr.append(customer.getName() + "@");
}
out.write(responseStr.toString());
out.flush();
out.close();
}