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的、我还没有做、另外一个就是如果我有几百万、几千万、甚至上亿条数据的时候该怎么办！
这个玩意怎么优化啊？ 希望知道的给说说、感激不尽！！！
