jquery ajax 实现搜索框自动提示功能
2012-04-28 16:24
423 查看
**************************************************************************
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"
onclick="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();
}
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"
onclick="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();
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery实现搜索框自动提示功能
- jQuery实现自动提示，分类选择等功能的搜索框
- Android基于高德地图实现搜索框的自动输入提示功能
- Eclipse添加DTD文件实现xml的自动提示功能
- jquery实现邮箱自动填充提示功能
- jquery实现邮箱自动填充提示功能
- jquery 实现输入邮箱时自动补全下拉提示功能
- android实现自动提示功能
- 用jQuery的ajax的功能实现输入自动提示的功能
- Servlet+Ajax实现智能搜索框智能提示功能
- MyEclipse添加ibatis DTD文件实现xml的自动提示功能
- Jquery实现搜索框提示功能示例代码
- Eclipse添加DTD文件实现xml的自动提示功能
- 做ajax搜索框自动提示功能的体会
- 如何实现简单的自动提示(autocomplete)填充搜索功能java代码。
- Eclipse添加DTD文件实现xml的自动提示功能
- 使用python代码实现三叉搜索树高效率”自动输入提示”功能
- Eclipse添加DTD文件实现xml的自动提示功能
- javascript搜索自动提示功能的实现第1/3页
- 自动提示功能实现：solr中TermsComponent源代码分析