首頁 > 開發者 > JavaScript
歡迎技術交流。 QQ：138986722
在"JavaScript自動補全"這篇文章中、用一個數組把"顏色集合"儲存起來、然後在跟使用者輸入的值進行對比、這次呢把數組的值替換掉。用Ajax與後台資料進行互動、前面的代碼就不多說了。資料庫呢、用的是Oracle10G。js呢、用了一個架構、就是Jquery(1.4.2)。後台架構採用的是ssh~~~這個ssho(︶︿︶)o
唉！！！
我寫的這個自動補全呢、基本上是個廢品、希望看到得能說說自己對自動補全的一些看法、無論是Sql語句、還是資料庫的設計、然後程式的設計等等。
資料庫設計：
--建立表、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層、
/** * 帶條件查詢 */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); }
Action
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));elseout.print("");}catch(Exception ex){out.print("error");ex.printStackTrace();}finally{if(out != null) out.close();}return null;}}
Struts配置：
<action name="jqueryAjax" class="ajaxAction"> <result></result> </action>
頁面代碼：
<%@ 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);} }); }elseclearColors(); //無輸入時清除提示框}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>
運行：
只是對findColors()方法進行了修改、其他都不改動~~~！！！
在這裡點擊某個值的時候應該在去後台給這個欄位的clicks加1的、我還沒有做、另外一個就是如果我有幾百萬、幾千萬、甚至上億條資料的時候該怎麼辦！
這個玩意怎麼最佳化啊？ 希望知道的給說說、感激不盡！！！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
