论坛首页 → 入门技术论坛 →

J2EE 0.7.2—用ajax实现像google那样的suggest-search功能(简化版)

浏览 2517 次
锁定老帖子 主题：J2EE 0.7.2—用ajax实现像google那样的suggest-search功能(简化版)
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • cui09
  • 等级: 初级会员
  • 性别:
  • 文章: 22
  • 积分: 56
  • 来自: 吉林
   发表时间：2007-09-18  

首先是需要建一个库。考虑可以这样。建立一个拼音的字段对应汉字的，用户打简拼即可查出汉字

sql 代码
  1. create table `j2ee`.`suggest`(   
  2.     `SUGGEST_ID` int not null auto_increment,   
  3.    `TITLE` varchar(255),   
  4.     primary key (`SUGGEST_ID`)   
  5. );  

当然这里为了方便没有这样做。直接查title这个字段了。

其次是action了

java 代码
  1. package org.perfect.struts.action;   
  2.   
  3. import java.util.List;   
  4. import java.util.Map;   
  5.   
  6. import javax.servlet.http.HttpServletRequest;   
  7. import javax.servlet.http.HttpServletResponse;   
  8.   
  9. import org.apache.struts.action.ActionForm;   
  10. import org.apache.struts.action.ActionForward;   
  11. import org.apache.struts.action.ActionMapping;   
  12. import org.perfect.struts.dao.SearchSuggestDao;   
  13. import org.perfect.struts.form.LoginForm;   
  14. import org.perfect.struts.form.SearchSuggestForm;   
  15.   
  16. public class SearchSuggestAction extends BasicDispatchAction {   
  17.   
  18.     private SearchSuggestDao searchSuggestDao;   
  19.   
  20.     public void setSearchSuggestDao(SearchSuggestDao searchSuggestDao) {   
  21.         this.searchSuggestDao = searchSuggestDao;   
  22.     }   
  23.   
  24.     public ActionForward execute(ActionMapping mapping, ActionForm form,   
  25.             HttpServletRequest request, HttpServletResponse response)   
  26.             throws Exception {   
  27.   
  28.         SearchSuggestForm searchSuggestForm = (SearchSuggestForm) form;   
  29.         String action = request.getParameter("action");   
  30.         action = (action == null || "".equals(action)) ? "init" : action;   
  31.         return this.dispatchMethod(mapping, form, request, response, action);   
  32.   
  33.     }   
  34.   
  35.     public ActionForward init(ActionMapping mapping, ActionForm form,   
  36.             HttpServletRequest request, HttpServletResponse response) {   
  37.   
  38.         SearchSuggestForm searchSuggestForm = (SearchSuggestForm) form;   
  39.   
  40.         return mapping.getInputForward();   
  41.     }   
  42.   //重点在这里
  43.     public ActionForward login(ActionMapping mapping, ActionForm form,   
  44.             HttpServletRequest request, HttpServletResponse response)   
  45.             throws Exception {   
  46.         SearchSuggestForm searchSuggestForm = (SearchSuggestForm) form;   
  47.   //由于我的Ajax水平比较初级，所以中文的问题搞了两个多小时，实现英文版的是很快的。
  48.   //这里必须得这样写。没有为什么。老外才不会管中国人的问题呢。
  49.         response.setCharacterEncoding("GBK");   
  50.         response.setContentType("text/html");   
  51.         response.setHeader("Cache-Control", "no-cache");   
  52.         // new String(s.getBytes("iso8859-1"),"gbk");   
  53.         String user_no = new String(request.getParameter("title").getBytes(   
  54.                 "iso8859-1"), "gbk");   
  55.         System.out.println("user_no=" + user_no);   
  56.         try {   
  57.             if (!"".equals(user_no) && user_no != null) {   
  58.                 // String msg = "";   
  59.                 // select title from suggest where title like '%bc%'
  60.                 //取到后拼个sql.用searchSuggestDao方法取出值放入LIST。
  61.                 //searchSuggestDao直接继承自BaseDaoImp.里面没有代码，就不写了。
  62.                 String sql = "select title from suggest where title like '%"  
  63.                         + user_no + "%'";   
  64.                 System.out.println("sql=" + sql);   
  65.                 List list = searchSuggestDao.findForListBySql(sql);   
  66.                 StringBuffer sb = new StringBuffer();   
  67.                 for (int i = 0; i < list.size(); i++) {   
  68.                     Map map = (Map) list.get(i);   
  69.                     String key = map.get("title").toString();
  70.                     //用"\n"分隔   
  71.                     sb.append(key + "\n");   
  72.                 }   
  73.                 System.out.println(sb.toString());   
  74.                 //传给页面，搞定了。
  75.                 response.getWriter().write(sb.toString());   
  76.             }   
  77.         } catch (Exception e) {   
  78.             e.printStackTrace();   
  79.         }   
  80.   
  81.         return null;   
  82.   
  83.     }   
  84.   
  85. }   

 

最后是jsp了。有一点点儿麻烦

由于我的css同样很烂。所以这里就没考虑太多。为达到效果不则手段了。以后会改的好看一点。

合理一点。

css 代码
  1. <!---->  
  2. "http://www.w3.org/1999/xhtml">   
  3. <!---->  
  4.   
  5.   
  6.          
  7.        
  8.       "text/css" media="screen">   
  9.             body {   
  10.                 font: 11px arial;   
  11.             }   
  12.             .suggest_link {   
  13.                 background-color: #FFFFFF;   
  14.                 padding: 2px 6px 2px 6px;   
  15.                 width: 573px;   
  16.             }   
  17.             .suggest_link_over {   
  18.                 background-color: #E8F2FE;   
  19.                 padding: 2px 6px 2px 6px;   
  20.                 width: 573px;   
  21.             }   
  22.             #search_suggest {   
  23.                 position: absolute;    
  24.                 background-color: #FFFFFF;    
  25.                 text-align: left;    
  26.                 border: 0px solid #8AABD5;   
  27.                 width: 575px;          
  28.                 cursor: hand;      
  29.             }          
  30.         
  31.     
不知道是我写的js烂，还是javaeye的功能有点小毛病。js发了四五回还是乱七八糟的。
真接发附件了。
xml 代码
  1. <body onclick='hideSearchSuggest()'>  
  2.     <html:form action="/searchSuggestAction" method="POST">  
  3.     <bean:define id='form' name='searchSuggestForm' type='org.perfect.struts.form.SearchSuggestForm'>  
  4.     bean:define>  
  5.        
  6.     <fieldset><table><tr>  
  7.        <td class="free_input"><input type='text' name="title" size='80' onkeyup="testPrototype();" autocomplete="off"/>td>  
  8.        <td><span style='font-size:12'>搜索span>td>  
  9.     tr>table>  
  10.            
  11.     fieldset>  
  12.     <div id="search_suggest">div>  
  13.        
  14.     html:form>  
  15.   body>  
  16. html>  

没啥东西。基本上很简单。不过也搞了三四个小时才搞得定。

全靠谷老哥了。

不晓得没了他我能不能自己独立写点东西。

  • 大小: 65.8 KB
返回顶楼
         
论坛首页 → 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics