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

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

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>  

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

全靠谷老哥了。

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