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

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，为对数据库连接的一个分装类

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

猜你喜欢