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

来源：互联网发布：免费车销软件编辑：程序博客网时间：2024/05/21 09:11

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

阅读全文

0 0