页面
<Head>
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<script type="text/javascript" src="js/jquery-1.6.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
//具体功能部分 具体每个参数的意思请看最下面的网址
<script type="text/javascript">
$(document).ready(function() {
// shopping/auto1_findGoods.action (url要得返回数据的地址)
$("#queryString").autocomplete("shopping/auto1_findGoods.action", {
matchSubset:false,
multiple: true,
width:170, //下拉的宽度
selectFirst:false,
max:10, //最多显示的个数
multipleSeparator: ' ',
dataType: 'json',
extraParams: {
queryString: function() { return $("#queryString").val(); }
},
//加入对返回的json对象进行解析的函数,函数返回一个数组
parse: function(data) {
if(data) {
var rows = [];
for(var i=0; i<data.entities.length; i++){
rows[rows.length] = {
//显示在下拉提示框中的内容
data:data.entities[i].name,
//显示在输入文本框里的内容 ,
result:data.entities[i].name
};
}
return rows;
}
},
formatItem: function(data, i, n) {
return data;
},
formatResult: function(data) {
return data;
}
});
});
//点提交按钮时提交值
function sele() {
var str = $("#queryString").val();
}
</script>
HTML 代码
<div align="center">
<b>用户搜索</b>
<form action="" method="post">
<input type="text" id="queryString" name="queryString" />
<input type="button" value="搜索" id="se" onclick="sele()"/>
</form>
</div>
Action 中代码
public class AutoAction extends HibernateDaoSupport {
private List<Object> entities; //set get
private String queryString; //set get
@SuppressWarnings("unchecked")
public String findGoods() throws UnsupportedEncodingException {
str = new String(queryString.getBytes("iso8859-1"),"utf-8");
String hql = "from Goods g where g.name like '%"+str.trim()+"%'";
entities = getHibernateTemplate().find(hql);
return "findGoods";
}
}
配置文件
<action name="auto1_*" class="autoAction" method="{1}">
<result name="findGoods" type="json">
<param name="includeProperties">
entities\[\d+\]\.id, entities\[\d+\]\.name, entities\[\d+\]\.price, entities\[\d+\]\.discount, entities\[\d+\]\.count, entities\[\d+\]\.cdate, entities\[\d+\]\.lamge, entities\[\d+\]\.status
</param>
</result>
</action>
具体还有好多属性请参考
http://wenku.baidu.com/view/863b0cf2f90f76c661371aea.html