简单实现搜索框即时搜索

来源：互联网发布：淘宝网折叠餐桌编辑：程序博客网时间：2024/05/21 21:47

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.min.js"></script>  <script type="text/javascript" src="js/index.js"></script>   <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()" onblur="missSelect()"             style="width:300px;display:none">          </select>      </form>  </body>  </html>

js部分

function test(keyword,event){      if (keyword!='' && keyword!=null) {     //定义全局变量          var keyword = $("#keyword").val();          var sel = document.getElementById("sel");          $.post(                       "serachServlet",//url                  "keyword="+ keyword,//发送的数据                  function(data){//获取响应回来的数据                  console.log(data);                    document.getElementById("sel").innerHTML="";                      if (data.indexOf("#")>0) {//判断响应回来的数据是否为单个 若为单个无需拆分                    var arr = new Array;                          var arr = data.split("#");//将响应回来的数据按#拆分成数组                                                             for(var i=0;i<arr.length;i++){//循环每一个满足条件的记录                              //将当前循环满足条件的商品名称生成一个下拉的选项                              sel.options[i]=new Option(arr[i],i);                          }      }else{    sel.options[0]=new Option(data,0);      }                                        //判断是否有满足条件的商品                      if(data.length>0){                          sel.style.display='block';  //如果有，下拉框为可点击状态                    }else{                          sel.style.display='none';  //没有，下拉框为不可点击状态                    }                      //当用户按下上下键时获取相应的值                      if(event.keyCode==40){                          sel.focus();                      }                     },                  //发送数据类型                  "text"          );  }} function missSelect(){//选择完内容后，下拉框失去焦点，将其改为不可点击状态，下拉框消失var sel = document.getElementById("sel");sel.style.display='none';}  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());  }

servlet部分

@WebServlet("/serachServlet")public class SearchServlet extends HttpServlet {private IInterviewService interviewService = new InterviewServiceImpl();@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");// 查询String search = interviewService.searchMessage(keyword);// search = "123#123#12";out.print(search);}}

剩下的dao层就是根据所传的keyword进行模糊查询，查询结果拼接到字符串中用“#”间隔，将字符串返回到Servlet中并输出到页面，
在这就不多说明了，
有不懂的或更好方法的，欢迎评论。

阅读全文

0 0

简单实现搜索框 即时搜索

简单实现搜索框即时搜索