js自动补全——接上一篇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)); else out.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); } }); } 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>
运行截图:
只是对findColors()方法进行了修改、其他都不改动~~~!!!
在这里点击某个值的时候应该在去后台给这个字段的clicks加1的、我还没有做、另外一个就是如果我有几百万、几千万、甚至上亿条数据的时候该怎么办!
这个玩意怎么优化啊? 希望知道的给说说、感激不尽!!!