jQuery.Autocomplete 与struts2的整合

最新推荐文章于 2024-09-14 18:52:56 发布

Coooooooooooder

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量178

点赞数

分类专栏：研究文章标签： javascript java json ViewUI

本文链接：https://blog.csdn.net/KingDino/article/details/84296616

版权

研究专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery.Autocomplete 与struts2的整合 [img]http://dl.iteye.com/upload/attachment/0074/5314/169371ab-3686-3a75-8987-7f86a78a0f63.jpg[/img]
需要做一个text的自动提示功能,于是翻翻jquery 的书,看了一个叫做autocomplete的插件,决定试一试怎么使用.上google搜索了一下插件(开始搜索的是山寨版本的,导致自己的ajax无法调用action,那个郁闷啊).最后还是去jquery的官网上,下载了demo和源码.闲话不说,开始写代码:
1.html页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>Auto Complete 4.1 (backwards compatible file)</title>
<script type='text/javascript' src='js/jquery-1.4.2.js'></script>
<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
<link rel='stylesheet' type='text/css' href='style/jquery.autocomplete.css' />
<script type='text/javascript'>
$(document).ready(function()
{
$("#queryCon").autocomplete("autoComplete.action",
{
minChars: 1,
max:5,
width: 150,
matchContains: true,
autoFill: false,
//如果需要另外传值给action的话可以用这样的方式,如果只是把input里面的值传递给action的话,可以不写
extraParams:
{
queryCon: function()
{
return $("#queryCon").val();
}
},
//进行对返回数据的格式处理
parse: function(test)
{
//content为我action里面定义的值
data = test.content;
var rows = [];

for(var i=0; i<data.length; i++)
{
rows[rows.length] =
{
//我没有特殊的要求,所以三个写的一样
data:data[i],
value:data[i],
//result里面显示的是要返回到列表里面的值
result:data[i]
};
}
return rows;
},
formatItem:function(item)
{
//我没有特殊的要求,直接返回了
return item;
}
});
});
</script>
</head>
<body>
<input type='text' style='width: 300px;' id='queryCon'
name="queryCon" />
<input type='submit' value="All Values" />
</body>
</html>
2.action部分
package com.training.util;
import java.util.LinkedList;
import java.util.List;
import org.hibernate.Query;
import org.hibernate.Session;
import com.opensymphony.xwork2.ActionSupport;
import com.training.hibernate.User;
public class AutoCompleteAction extends ActionSupport {
private List<String> content;
public List<String> getContent() {
return content;
}
public void setContent(List<String> content) {
this.content = content;
}
private String queryCon;
public void setQueryCon(String queryCon) {
this.queryCon = queryCon;
}
public String getQueryCon() {
return queryCon;
}
@Override

public String execute() throws Exception {
//回出现中文乱码传值的问题,所以需要再编码
,不过很奇怪,我写了filter了,不知道为什么还需要这样
queryCon = new String(queryCon.getBytes("ISO-8859-1"), "UTF-8");
Session session = HibernateSessionFactory.getSession();
Query query = session
.createQuery("select name from User as user where user.name like ? ");

query.setString(0, this.queryCon + "%");
List<String> list = query.list();
this.setContent(list);
session.close();
return SUCCESS;
}
}
3.struts.xml
<package name="login" extends="json-default">
<action name="autoComplete" class="com.training.util.AutoCompleteAction">
<result type="json"/>
</action>
</package>

ps:在中文输入法的状态下,中文的输入有问题.解决的办法,见
http://blog.csdn.net/huangxu0311/archive/2010/04/28/5539391.aspx

jQuery.Autocomplete 中文支持收藏
jQuery.Autocomplete是jquery的流行插件，能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能，支持ajax数据加载。

但唯一遗憾的是，在对中文输入法打开时，firefox3.0中是对中文拼音的自动匹配，而对输入后的中文无法及时触发匹配；而在我的IE6.0下，则无此问题。

原因分析：
Autocomplete插件对用户输入字符的触发自动匹配是通过”keydown”事件进行的（可分析 jquery.autocomplete.js第92行），在IE6中，当输入法打开时，输入的字符是不会触发”keydown”的，只有中文输入完毕才触发之，所以中文输入和latin文没有区别的；但在firefox3.0下，无论输入法打开否，按键都会触发”keydown”事件，所以造成中文输入完毕，自动匹配的是刚才打出的部分中文拼音字母。

解决方法：
网上查到的最多做法是修改jquery.autocomplete.js第92行，将”keydown”替换为”keyup”，但这个不是根本办法，虽然这样改后可在firefox中及时对输入的中文进行自动匹配，但将原插件中回车、tab等重要的事件机制破坏了，比如这样改后，如果你的input是在一个form里的话，回车从原来的将选定项输入到input中变为了直接提交form表单了，这并不是我们想要的。

我的方法原理是，补充一个原插件触发查询的事件，就是当input输入栏发生字符变化时，重新进行查询（调用其内部的onChange函数），这里主要针对firefox而言，因为我们的系统访问最多的是IE和firefox。而恰好firefox有一个input变化的事件就是oninput，那么我们只要在原jquery.autocomplete.js第199行，插入如下代码：
.bind("input", function()
{
onChange(0, true);
});