js自動補全——接上一篇JavaScript自動補全

時間 2021-01-02

標籤 javascript html java node jquery ajax sql 數據庫 apache 數組欄目 JavaScript 简体版

原文原文鏈接

在"JavaScript自動補全"這篇文章中、用一個數組把"顏色集合"存儲起來、而後在跟用戶輸入的值進行對比、此次呢把數組的值替換掉。用Ajax與後臺數據進行交互、前面的代碼就很少說了。數據庫呢、用的是Oracle10G。js呢、用了一個框架、就是Jquery(1.4.2)。後臺框架採用的是ssh~~~這個ssho(︶︿︶)o 唉！！！javascript

我寫的這個自動補全呢、基本上是個廢品、但願看到得能說說本身對自動補全的一些見解、不管是Sql語句、仍是數據庫的設計、而後程序的設計等等。html

數據庫設計：java

  
  
           
  
  
   
   
            
   
   --建立表、id爲主鍵自動增加、title爲用戶輸入的關鍵字、clicks爲這個關鍵字的點擊率   
   
   
            
   
   create table bms_mate(id integer primary key ,title varchar2(50),clicks number);   
   
   
            
   
    
   
   
            
   
   -- 創建序列：   
   
   
            
   
   -- Create sequence    
   
   
            
   
   create sequence bms_mate_sequence                          
   
   
            
   
   minvalue 1   --最小               
   
   
            
   
   maxvalue 999999999999999999999999999  --最大   
   
   
            
   
   start with 1   --增長量   
   
   
            
   
   increment by 1 --從***開始   
   
   
            
   
   cache 20;      
   
   
            
   
    
   
   
            
   
    insert into bms_mate values(bms_mate_sequence.nextval,'旦旦而學')   
   
   
            
   
       
   
   
            
   
    select * from bms_mate

數據截圖：

後臺代碼：Dao層、node

  
  
           
  
  
   
   
            
   
   /**  
   
   
            
   
    * 帶條件查詢  
   
   
            
   
    */   
   
   
            
   
   public List<T> getAll(String hql,List params) {   
   
   
            
   
       query = this.getSession().createQuery(hql);   
   
   
            
   
       if (null != params && params.size() > 0) {   
   
   
            
   
           // 循環給參數賦值   
   
   
            
   
           for (int i = 0; i < params.size(); i++) {   
   
   
            
   
               query.setParameter(i, params.get(i));   
   
   
            
   
           }   
   
   
            
   
       }   
   
   
            
   
       List<T> list = query.list();   
   
   
            
   
       return list;   
   
   
            
   
   }

Biz層

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

Actionjquery

  
  
           
  
  
   
   
            
   
   package com.boxun.action;   
   
   
            
   
      
   
   
            
   
   import java.io.PrintWriter;   
   
   
            
   
      
   
   
            
   
   import java.util.List;   
   
   
            
   
      
   
   
            
   
   import javax.servlet.http.HttpServletRequest;   
   
   
            
   
   import javax.servlet.http.HttpServletResponse;   
   
   
            
   
      
   
   
            
   
   import org.apache.struts2.interceptor.ServletRequestAware;   
   
   
            
   
   import org.apache.struts2.interceptor.ServletResponseAware;   
   
   
            
   
      
   
   
            
   
   import com.boxun.biz.IAjaxBiz;   
   
   
            
   
   import com.opensymphony.xwork2.ActionSupport;   
   
   
            
   
      
   
   
            
   
   public class AjaxAtion extends ActionSupport implements ServletRequestAware , ServletResponseAware{   
   
   
            
   
       /* HttpServletRequest對象  
   
   
            
   
        */   
   
   
            
   
       private javax.servlet.http.HttpServletRequest request;   
   
   
            
   
       private javax.servlet.http.HttpServletResponse response;   
   
   
            
   
          
   
   
            
   
       private IAjaxBiz ajaxBiz;   
   
   
            
   
      
   
   
            
   
       public void setAjaxBiz(IAjaxBiz ajaxBiz) {   
   
   
            
   
           this.ajaxBiz = ajaxBiz;   
   
   
            
   
       }   
   
   
            
   
       public void setServletRequest(HttpServletRequest request) {   
   
   
            
   
           this.request = request;   
   
   
            
   
       }   
   
   
            
   
       public void setServletResponse(HttpServletResponse response) {   
   
   
            
   
           this.response=response;   
   
   
            
   
       }   
   
   
            
   
          
   
   
            
   
       /**  
   
   
            
   
        * 查詢匹配項  
   
   
            
   
        * 2011-7-13上午10:05:37  
   
   
            
   
        * @return  
   
   
            
   
        */   
   
   
            
   
       public String getTitle(){   
   
   
            
   
           PrintWriter out = null;   
   
   
            
   
           response.setCharacterEncoding("UTF-8");   
   
   
            
   
           try{   
   
   
            
   
               out = response.getWriter();   
   
   
            
   
               String title = request.getParameter("colors");   
   
   
            
   
               if(title == null || title.equals("")){   
   
   
            
   
                   out.print("error");   
   
   
            
   
                   return null;   
   
   
            
   
               }   
   
   
            
   
               List list = ajaxBiz.getBmsAll(title);   
   
   
            
   
               String result = "" ;   
   
   
            
   
               for (Object obj : list) {   
   
   
            
   
                   result += ","+obj.toString();   
   
   
            
   
               }   
   
   
            
   
               if(result != null && !"".equals(result))   
   
   
            
   
                   out.print(result.substring(1));   
   
   
            
   
               else   
   
   
            
   
                   out.print("");   
   
   
            
   
           }catch(Exception ex){   
   
   
            
   
               out.print("error");   
   
   
            
   
               ex.printStackTrace();   
   
   
            
   
           }finally{   
   
   
            
   
               if(out != null) out.close();   
   
   
            
   
           }   
   
   
            
   
           return null;   
   
   
            
   
       }   
   
   
            
   
          
   
   
            
   
   }

Struts配置：ajax

  
  
           
  
  
   
   
            
   
   <action name="jqueryAjax" class="ajaxAction">   
   
   
            
   
               <result></result>   
   
   
            
   
           </action>

頁面代碼：sql

  
  
           
  
  
   
   
            
   
   <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>   
   
   
            
   
   <%   
   
   
            
   
   String path = request.getContextPath();   
   
   
            
   
   String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
   
   
            
   
   %>   
   
   
            
   
      
   
   
            
   
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
   
   
            
   
   <html>   
   
   
            
   
     <head>   
   
   
            
   
       <base href="<%=basePath%>">   
   
   
            
   
          
   
   
            
   
       <title>匹配用戶輸入</title>   
   
   
            
   
          
   
   
            
   
       <meta http-equiv="pragma" content="no-cache">   
   
   
            
   
       <meta http-equiv="cache-control" content="no-cache">   
   
   
            
   
       <meta http-equiv="expires" content="0">       
   
   
            
   
       <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
   
   
            
   
       <meta http-equiv="description" content="This is my page">   
   
   
            
   
       <style>   
   
   
            
   
       <!--   
   
   
            
   
       body{   
   
   
            
   
           font-family: Arial,Helvetica,sans-serif;   
   
   
            
   
           font-size: 12px; padding: 0px; margin: 5px;   
   
   
            
   
       }   
   
   
            
   
       form{padding: 0px; margin: 0px;}   
   
   
            
   
       input{   
   
   
            
   
           /*用戶輸入框的樣式*/   
   
   
            
   
           font-family: Arial,Helvetica,sans-serif;   
   
   
            
   
           font-size: 12px; border: 1px solid #000000;   
   
   
            
   
           width: 200px; padding: 1px; margin: 0px;   
   
   
            
   
       }   
   
   
            
   
       #popup{   
   
   
            
   
           /*提示框div塊的樣式*/   
   
   
            
   
           position: absolute; width: 202px;   
   
   
            
   
           color: #004a7e; font-size: 12px;   
   
   
            
   
           font-family: Arial,Helvetica,sans-serif;   
   
   
            
   
           left: 36px; top: 25px;   
   
   
            
   
       }   
   
   
            
   
       #popup.show{   
   
   
            
   
           /*顯示提示框的邊框*/   
   
   
            
   
           border: 1px solid #004a7e;   
   
   
            
   
       }   
   
   
            
   
       #popup.hide{   
   
   
            
   
           /*隱藏提示框的邊框*/   
   
   
            
   
           border: none;      
   
   
            
   
       }   
   
   
            
   
       /*提示框的樣式風格*/   
   
   
            
   
       ul{   
   
   
            
   
           list-style: none;   
   
   
            
   
           margin: 0px; padding: 0px;   
   
   
            
   
       }   
   
   
            
   
       li.mouseOver{   
   
   
            
   
           background-color: #004a7e;   
   
   
            
   
           color: #FFFFFF;   
   
   
            
   
       }   
   
   
            
   
       li.mouseOut{   
   
   
            
   
           background-color: #FFFFFF;   
   
   
            
   
           color: #004a7e;   
   
   
            
   
       }   
   
   
            
   
       -->   
   
   
            
   
       </style>   
   
   
            
   
       <script type="text/javascript" src="js/jquery-1.4.4.js" ></script>   
   
   
            
   
       <script type="text/javascript">   
   
   
            
   
           var oInputField ,oPopDiv , oColorsUl,aColors;   
   
   
            
   
              
   
   
            
   
           function initVars(){   
   
   
            
   
               //初始化變量   
   
   
            
   
               oInputField = document.forms["myForm1"].colors;   
   
   
            
   
               oPopDiv = document.getElementById("popup");   
   
   
            
   
               oColorsUl = document.getElementById("colors_ul");   
   
   
            
   
           }   
   
   
            
   
           function findColors(){   
   
   
            
   
               initVars();   
   
   
            
   
               var aResult = new Array();  //用於存放匹配結果   
   
   
            
   
               if(oInputField.value.length > 0){   
   
   
            
   
                   var params = jQuery("#myForm1").serialize();  //序列化表格數據"myForm1"爲表格的id   
   
   
            
   
                   $.ajax({   
   
   
            
   
                       type:'post',   
   
   
            
   
                       data: params ,   
   
   
            
   
                       url:"<%=path %>/jqueryAjax!getTitle.action",   
   
   
            
   
                       success:function(data) {   
   
   
            
   
                           if(data == "error" || data == null || data == ""){   
   
   
            
   
                               clearColors();   
   
   
            
   
                               return;   
   
   
            
   
                           }    
   
   
            
   
                           aResult = data.split(",");   
   
   
            
   
                           setColors(aResult);   
   
   
            
   
                       }    
   
   
            
   
                   });    
   
   
            
   
               }   
   
   
            
   
               else   
   
   
            
   
                   clearColors(); //無輸入時清除提示框   
   
   
            
   
           }   
   
   
            
   
              
   
   
            
   
              
   
   
            
   
           function clearColors(){   
   
   
            
   
               //清除提示內容   
   
   
            
   
               for(var i = oColorsUl.childNodes.length - 1 ; i >= 0 ; i-- )   
   
   
            
   
                   oColorsUl.removeChild(oColorsUl.childNodes[i]);   
   
   
            
   
               oPopDiv.className = "hide" ;   
   
   
            
   
           }   
   
   
            
   
              
   
   
            
   
           function setColors(the_colors){   
   
   
            
   
               //顯示提示框、傳入的參數即爲匹配出來的結果組成的數組   
   
   
            
   
               clearColors();  //沒輸入一個字母就先清除原先的提示、再繼續   
   
   
            
   
               oPopDiv.className = "show" ;   
   
   
            
   
               var oLi ;   
   
   
            
   
               for(var i = 0 ; i < the_colors.length ; i++ ){   
   
   
            
   
                   //將匹配的提示結果逐一顯示給用戶   
   
   
            
   
                   oLi = document.createElement("li");   
   
   
            
   
                   oColorsUl.appendChild(oLi);   
   
   
            
   
                   oLi.appendChild(document.createTextNode(the_colors[i]));   
   
   
            
   
                      
   
   
            
   
                   oLi.onmouseover = function(){   
   
   
            
   
                       this.className = "mouseOver" ;  //鼠標指針通過時高亮   
   
   
            
   
                   }   
   
   
            
   
                   oLi.onmouseout = function(){   
   
   
            
   
                       this.className = "mouseOut" ;   //鼠標指針離開時恢復原樣   
   
   
            
   
                   }   
   
   
            
   
                   oLi.onclick = function(){   
   
   
            
   
                       //用戶單擊某個匹配項時、設置輸入框爲該項的值   
   
   
            
   
                       oInputField.value = this.firstChild.nodeValue;   
   
   
            
   
                       clearColors();  //同時清除提示框   
   
   
            
   
                   }   
   
   
            
   
               }   
   
   
            
   
           }   
   
   
            
   
              
   
   
            
   
       </script>   
   
   
            
   
      
   
   
            
   
     </head>   
   
   
            
   
        
   
   
            
   
     <body>   
   
   
            
   
       <form method="post" name="myForm1" id="myForm1">   
   
   
            
   
           Color:<input type="text" name="colors" id="colors" onkeyup="findColors();" />   
   
   
            
   
       </form>   
   
   
            
   
       <div id="popup">   
   
   
            
   
           <ul id="colors_ul"></ul>   
   
   
            
   
       </div>   
   
   
            
   
     </body>   
   
   
            
   
   </html>