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

最新推荐文章于 2023-01-05 13:37:11 发布

hhfwn

最新推荐文章于 2023-01-05 13:37:11 发布

阅读量3.1k

点赞数

文章标签： jquery ajax function xmlhttprequest autocomplete stylesheet

本文链接：https://blog.csdn.net/hhf1029/article/details/7491084

版权

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

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>

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

hhfwn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery ajax 实现搜索框自动提示功能

**************************************************************************1 :js**************************************************************************var nowline = -1;// 提示框的查看行号$(document)
复制链接

扫一扫