jquery ajax 实现搜索框自动提示功能

**************************************************************************

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&gt;&gt;</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();
}


 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值