当前位置： 代码迷 >> Ajax >> J2EE 0.7.2―用ajax兑现像google那样的suggest-search功能(简化版)
  详细解决方案

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

热度：259   发布时间：2012-10-27 10:42:25.0
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>??

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

全靠谷老哥了。

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

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.