ajax+jquery实现类似百度搜索提示框

ajax+jquery实现类似百度搜索提示框

需求：

1、     输入某一关键字后，在搜索框下会显示出与此关键字相关的提示信息

2、     可以通过键盘的上下键以及回车键进行操作

 

思路：

1、     输入关键字后，通过ajax异步的方式将关键字提交给相应的处理模块，获得处理结果(主要是通过查询数据库中某张表获得以此关键字开头的符合要求的数据)，然后再加载到页面上。

2、     通过获取用户操作键盘的event.keyCode值来进行不同的操作。(up:38  down: 40  enter:13)

 

下面给出主要的代码：

页面html代码: <div class="searchformdiv">                             <form id="searchform" action="<%=basePath%>web/search-list.shtml"  οnsubmit="return f_search()" target="_self">                                           <div><input type="text" id="keywords" class="inputtextsearch2"  autocomplete="off"  value="${pagerestrict.keywords}" />                                           <input type="image" src="<%=basePath%>web/imgs/button_searcha.png" align="absmiddle"> </div></form></div> <script> function f_search(){ var keywords = document.getElementById("keywords").value.Trim();//Trim()方法在String.perporty.Trim()中写了，剔除字符串前后的空格 if(keywords==null||keywords==''){ return false; } document.getElementById("searchform").action="<%=basePath%>web/search-list.shtml"; } </script>

 

 

后台获取处理结果的部分代码(我是写在servlet中的): response.setContentType("text/xml;charset=utf-8");//设置返回信息的格式 request.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); String keywords = request.getParameter("key").replaceAll("<[/a-zA-Z]*>", "").replaceAll("[^a-zA-Z0-9_\u4e00-\u9fa5 ]*", ""); //剔除关键字中html标签以及非空格的特殊字符；这样做是为后面通过xml的形式返回数据做准备，因为在xml中出现< >这些符号的时候不好处理，所以为了简单点就在这给剔除了。O(∩_∩)O~ StringBuilder sql = new StringBuilder(); sql.append("select kw,totalcount, kwid from tproductkw where totalcount > 0 and ( kw like '").append(keywords).append("%' or sep like '").append(keywords).append("%' ) order by length(kw),searchtimes desc"); //用的mysql数据库order by length(kw)是按照kw的长度进行排序，不知道其它数据库是否有这个方法，木有的话可以自己写个滴 StringBuilder xml = new StringBuilder();   //下面是通过查询数据库获取符合要求的信息的，我是通过hibernate来操作的，你也可以通过自己的方法来对数据库进行操作 PageRestrict res  = new PageRestrict(); res.setLimit(15); List list = HibernateUtil.getListForPageBySql(sql.toString(), res).getDataList(); xml.append("<results>"); if(list != null){ for(Object item:list){ Object o[] = (Object[])item; String sug =o[0].toString().toLowerCase().replaceAll("<[/a-zA-Z]*>", "").replaceAll("[^a-zA-Z0-9_\u4e00-\u9fa5 ]*", ""); String count = o[1].toString(); int pos =sug.indexOf(keywords.toLowerCase());//提示信息中是否包含关键字信息(因为我的数据库表中存的关键字以及关键字全转拼音后的数据sep字段，所以在这里就有可能在源提示信息中不包含关键字) if(pos>-1){//提示内容包含关键字时 sug = sug.substring(pos+keywords.length()).toLowerCase();