在"JavaScript自动补全"这篇文章中、用一个数组把"颜色集合"存储起来、然后在跟用户输入的值进行对比、这次呢把数组的值替换掉。用Ajax与后台数据进行交互、前面的代码就不多说了。数据库呢、用的是Oracle10G。js呢、用了一个框架、就是Jquery(1.4.2)。后台框架采用的是ssh~~~这个ssho(︶︿︶)o 唉！！！

我写的这个自动补全呢、基本上是个废品、希望看到得能说说自己对自动补全的一些看法、无论是Sql语句、还是数据库的设计、然后程序的设计等等。

数据库设计：

  1. --创建表、id为主键自动增长、title为用户输入的关键字、clicks为这个关键字的点击率   
  2. create table bms_mate(id integer primary key ,title varchar2(50),clicks number);   
  3.  
  4. -- 建立序列：   
  5. -- Create sequence    
  6. create sequence bms_mate_sequence                          
  7. minvalue 1   --最小               
  8. maxvalue 999999999999999999999999999  --最大   
  9. start with 1   --增加量   
  10. increment by 1 --从***开始   
  11. cache 20;      
  12.  
  13.  insert into bms_mate values(bms_mate_sequence.nextval,'旦旦而学')   
  14.     
  15.  select * from bms_mate 
数据截图：

js自动补全——接上一篇JavaScript自动补全_职场

后台代码：Dao层、

  1. /**  
  2.  * 带条件查询  
  3.  */   
  4. public List<T> getAll(String hql,List params) {   
  5.     query = this.getSession().createQuery(hql);   
  6.     if (null != params && params.size() > 0) {   
  7.         // 循环给参数赋值   
  8.         for (int i = 0; i < params.size(); i++) {   
  9.             query.setParameter(i, params.get(i));   
  10.         }   
  11.     }   
  12.     List<T> list = query.list();   
  13.     return list;   
  14. } 
Biz层

  1. public List getBmsAll(String title) throws Exception {   
  2.   String hql = "select title from BmsMate where title like ? order by clicks desc";   
  3.   List params = new ArrayList();   
  4.   params.add(title+"%");   
  5.   return baseDao.getAll(hql,params);   
  6.  }  

Action

  1. package com.boxun.action;   
  2.    
  3. import java.io.PrintWriter;   
  4.    
  5. import java.util.List;   
  6.    
  7. import javax.servlet.http.HttpServletRequest;   
  8. import javax.servlet.http.HttpServletResponse;   
  9.    
  10. import org.apache.struts2.interceptor.ServletRequestAware;   
  11. import org.apache.struts2.interceptor.ServletResponseAware;   
  12.    
  13. import com.boxun.biz.IAjaxBiz;   
  14. import com.opensymphony.xwork2.ActionSupport;   
  15.    
  16. public class AjaxAtion extends ActionSupport implements ServletRequestAware , ServletResponseAware{   
  17.     /* HttpServletRequest对象  
  18.      */   
  19.     private javax.servlet.http.HttpServletRequest request;   
  20.     private javax.servlet.http.HttpServletResponse response;   
  21.        
  22.     private IAjaxBiz ajaxBiz;   
  23.    
  24.     public void setAjaxBiz(IAjaxBiz ajaxBiz) {   
  25.         this.ajaxBiz = ajaxBiz;   
  26.     }   
  27.     public void setServletRequest(HttpServletRequest request) {   
  28.         this.request = request;   
  29.     }   
  30.     public void setServletResponse(HttpServletResponse response) {   
  31.         this.response=response;   
  32.     }   
  33.        
  34.     /**  
  35.      * 查询匹配项  
  36.      * 2011-7-13上午10:05:37  
  37.      * @return  
  38.      */   
  39.     public String getTitle(){   
  40.         PrintWriter out = null;   
  41.         response.setCharacterEncoding("UTF-8");   
  42.         try{   
  43.             out = response.getWriter();   
  44.             String title = request.getParameter("colors");   
  45.             if(title == null || title.equals("")){   
  46.                 out.print("error");   
  47.                 return null;   
  48.             }   
  49.             List list = ajaxBiz.getBmsAll(title);   
  50.             String result = "" ;   
  51.             for (Object obj : list) {   
  52.                 result += ","+obj.toString();   
  53.             }   
  54.             if(result != null && !"".equals(result))   
  55.                 out.print(result.substring(1));   
  56.             else   
  57.                 out.print("");   
  58.         }catch(Exception ex){   
  59.             out.print("error");   
  60.             ex.printStackTrace();   
  61.         }finally{   
  62.             if(out != null) out.close();   
  63.         }   
  64.         return null;   
  65.     }   
  66.        
  67. }  

Struts配置：

  1. <action name="jqueryAjax" class="ajaxAction">   
  2.             <result></result>   
  3.         </action>  

页面代码：

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>   
  2. <%   
  3. String path = request.getContextPath();   
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
  5. %>   
  6.    
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  8. <html>   
  9.   <head>   
  10.     <base href="<%=basePath%>">   
  11.        
  12.     <title>匹配用户输入</title>   
  13.        
  14.     <meta http-equiv="pragma" content="no-cache">   
  15.     <meta http-equiv="cache-control" content="no-cache">   
  16.     <meta http-equiv="expires" content="0">       
  17.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
  18.     <meta http-equiv="description" content="This is my page">   
  19.     <style>   
  20.     <!--   
  21.     body{   
  22.         font-family: Arial,Helvetica,sans-serif;   
  23.         font-size: 12px; padding: 0px; margin: 5px;   
  24.     }   
  25.     form{padding: 0px; margin: 0px;}   
  26.     input{   
  27.         /*用户输入框的样式*/   
  28.         font-family: Arial,Helvetica,sans-serif;   
  29.         font-size: 12px; border: 1px solid #000000;   
  30.         width: 200px; padding: 1px; margin: 0px;   
  31.     }   
  32.     #popup{   
  33.         /*提示框div块的样式*/   
  34.         position: absolute; width: 202px;   
  35.         color: #004a7e; font-size: 12px;   
  36.         font-family: Arial,Helvetica,sans-serif;   
  37.         left: 36px; top: 25px;   
  38.     }   
  39.     #popup.show{   
  40.         /*显示提示框的边框*/   
  41.         border: 1px solid #004a7e;   
  42.     }   
  43.     #popup.hide{   
  44.         /*隐藏提示框的边框*/   
  45.         border: none;      
  46.     }   
  47.     /*提示框的样式风格*/   
  48.     ul{   
  49.         list-style: none;   
  50.         margin: 0px; padding: 0px;   
  51.     }   
  52.     li.mouseOver{   
  53.         background-color: #004a7e;   
  54.         color: #FFFFFF;   
  55.     }   
  56.     li.mouseOut{   
  57.         background-color: #FFFFFF;   
  58.         color: #004a7e;   
  59.     }   
  60.     -->   
  61.     </style>   
  62.     <script type="text/javascript" src="js/jquery-1.4.4.js" ></script>   
  63.     <script type="text/javascript">   
  64.         var oInputField ,oPopDiv , oColorsUl,aColors;   
  65.            
  66.         function initVars(){   
  67.             //初始化变量   
  68.             oInputField = document.forms["myForm1"].colors;   
  69.             oPopDiv = document.getElementById("popup");   
  70.             oColorsUl = document.getElementById("colors_ul");   
  71.         }   
  72.         function findColors(){   
  73.             initVars();   
  74.             var aResult = new Array();  //用于存放匹配结果   
  75.             if(oInputField.value.length > 0){   
  76.                 var params = jQuery("#myForm1").serialize();  //序列化表格数据"myForm1"为表格的id   
  77.                 $.ajax({   
  78.                     type:'post',   
  79.                     data: params ,   
  80.                     url:"<%=path %>/jqueryAjax!getTitle.action",   
  81.                     success:function(data) {   
  82.                         if(data == "error" || data == null || data == ""){   
  83.                             clearColors();   
  84.                             return;   
  85.                         }    
  86.                         aResult = data.split(",");   
  87.                         setColors(aResult);   
  88.                     }    
  89.                 });    
  90.             }   
  91.             else   
  92.                 clearColors(); //无输入时清除提示框   
  93.         }   
  94.            
  95.            
  96.         function clearColors(){   
  97.             //清除提示内容   
  98.             for(var i = oColorsUl.childNodes.length - 1 ; i >= 0 ; i-- )   
  99.                 oColorsUl.removeChild(oColorsUl.childNodes[i]);   
  100.             oPopDiv.className = "hide" ;   
  101.         }   
  102.            
  103.         function setColors(the_colors){   
  104.             //显示提示框、传入的参数即为匹配出来的结果组成的数组   
  105.             clearColors();  //没输入一个字母就先清除原先的提示、再继续   
  106.             oPopDiv.className = "show" ;   
  107.             var oLi ;   
  108.             for(var i = 0 ; i < the_colors.length ; i++ ){   
  109.                 //将匹配的提示结果逐一显示给用户   
  110.                 oLi = document.createElement("li");   
  111.                 oColorsUl.appendChild(oLi);   
  112.                 oLi.appendChild(document.createTextNode(the_colors[i]));   
  113.                    
  114.                 oLi.onmouseover = function(){   
  115.                     this.className = "mouseOver" ;  //鼠标指针经过时高亮   
  116.                 }   
  117.                 oLi.onmouseout = function(){   
  118.                     this.className = "mouseOut" ;   //鼠标指针离开时恢复原样   
  119.                 }   
  120.                 oLi.onclick = function(){   
  121.                     //用户单击某个匹配项时、设置输入框为该项的值   
  122.                     oInputField.value = this.firstChild.nodeValue;   
  123.                     clearColors();  //同时清除提示框   
  124.                 }   
  125.             }   
  126.         }   
  127.            
  128.     </script>   
  129.    
  130.   </head>   
  131.      
  132.   <body>   
  133.     <form method="post" name="myForm1" id="myForm1">   
  134.         Color:<input type="text" name="colors" id="colors" onkeyup="findColors();" />   
  135.     </form>   
  136.     <div id="popup">   
  137.         <ul id="colors_ul"></ul>   
  138.     </div>   
  139.   </body>   
  140. </html> 

运行截图：

js自动补全——接上一篇JavaScript自动补全_自动补全_02

只是对findColors()方法进行了修改、其他都不改动~~~！！！

在这里点击某个值的时候应该在去后台给这个字段的clicks加1的、我还没有做、另外一个就是如果我有几百万、几千万、甚至上亿条数据的时候该怎么办！

这个玩意怎么优化啊？ 希望知道的给说说、感激不尽！！！