您的位置：首页 > Web前端 > JavaScript

js及ajax实现搜索下拉自动提示

2017-06-12 20:27 585 查看

js代码

function test(keyword,event){

//定义全局变量
var keyword = $("#keyword").val();
var sel = document.getElementById("sel");
$.post(
"serachServlet",//url
"keyword="+ keyword,//发送的数据
function(data){//获取响应回来的数据
document.getElementById("sel").innerHTML="";
var arr = new Array;
var arr = data.split("#");//将响应回来的数据按#拆分成数组

for(var i=0;i<arr.length;i++){//循环每一个满足条件的记录
//将当前循环满足条件的商品名称生成一个下拉的选项
sel.options[i]=new Option(arr[i],i);
}
//判断是否有满足条件的商品
if(data.length>0){
sel.style.display='block';
}else{
sel.style.display='none';
}
//当用户按下上下键时获取相应的值
if(event.keyCode==40){
sel.focus();
}
},
//发送数据类型
"text"
);
}

function test2(){
//输入回车，获取输入框内容焦点
$("#sel").keypress(function(){
$("#keyword").focus();
$("#sel").css("display","none");
});
//双击，获取输入框内容焦点
$("#sel").dblclick(function(){
$("#keyword").focus();
$("#sel").css("display","none");
});
//将选中的下拉列表中的内容添加到输入框中
$("#keyword").val($("option:selected").html());
}
jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/product.js"></script>
<style>
css1{
display: nono;
}
css2{
display: block;
}
</style>
<title>自动完成搜索</title>
</head>
<body>
<form name="form1">
<input type="text" id="keyword" style="width:300px;" onkeyup="test(this.value,event)"><br/>
<select multiple="multiple" id="sel" onchange="test2()"
style="width:300px;display:none">
</select>
</form>
</body>
</html>

servlet代码
@WebServlet("/serachServlet")
public class SearchServlet extends HttpServlet {

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//ajax处理页面禁用缓存
resp.setHeader("Content-type", "text/html;charset=utf-8");
resp.setHeader("expirs", "mon,26jul199705:00:00gmt");
resp.setHeader("cache", "no-cache,must-revalidate");
resp.setHeader("pragma", "no-cache");
//是设置字符集
req.setCharacterEncoding("utf-8");
PrintWriter out = resp.getWriter();
//获取传值，搜索商品名称的关键字
String keyword = req.getParameter("keyword");
//查询
SearchSerives sese = new SearchSerives();
String search = "";
try {
search = sese.searchMessage(keyword);
} catch (SQLException e) {
e.printStackTrace();
}
//search = "123#123#12";
out.print(search);
}

}

数据库连接，业务处理
public class SearchSerives {

//传入关键字，连接数据库查询
public static String searchMessage(String keyword) throws SQLException{
//sql语句
String sql="SELECT * FROM products WHERE productName like '%"+keyword+"'";
Connection conn = MySqlDbUtil.getConnection();
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery(sql);
String rrs = "" ;
//循环结果集中的每一条记录
while(rs.next()){
rrs = rrs + "#" + rs.getString("productName");
}
//去掉第一个#
if(rrs.length()>0){
rrs= rrs.substring(1);
rrs= rrs.substring(rrs.indexOf("#"));
rrs= rrs.substring(1);
}
return rrs;
}

/*public static void main(String[] args) throws SQLException {
System.out.println(searchMessage("冰红茶"));
}*/
}

MySqlDbUtil，为对数据库连接的一个分装类

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript ajax

相关文章推荐

新的分享

章节导航