jquery autocomplete使用
jquery autocomplete可以实现自动完成，当用户输入一个关键字后，返回和这个关键字相关的词汇。
下面介绍两种向jquery autocomplete返回数据库数据的方法，第一种方法直接返回text，是我自己摸索出来的；第二种方法返回JSON数据，可以返回结构比较复杂的数据，参考了官方文档和网友的作法。我使用struts2和jquery1.3.2做了个sample，希望能帮到大家。
1、直接返回text数据
A、Action类
public class AutocompleteAction {
private String q;// autocomplete请求参数
pulbic void searchKey(){
if(q==null||q.trim().equals("")){
return;
}
Connection conn=null;
PreparedStatement ps=null;
ResultSet rs=null;
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType( "text/html;charset=utf-8 ");
response.setHeader( "Cache-Control ", "no-cache ");
response.setHeader( "Pargma ", "no-cache ");
PrintWriter writer =null;
try{
conn=getConnection();//得到连接，略
//netkeys表只有id和key两个字段
ps=conn.prepareStatement("select * from netkeys where keywork like ?");
ps.setString(1, q+"%");
rs= ps.executeQuery();
writer=response.getWriter();
while(rs.next()){
String v=rs.getString(2);
writer.println(v);
}
}catch(Exception e){
e.printStackTrace();
}finally{
//关闭连接等资源，略
if(writer!=null)writer.close();
}
}
B、JSP文件
引用jquery和autocomplete库，略
<SCRIPT type=text/javascript>
$(function() {
var url="autocompleteAction! searchKey.action";
$("#keyword").autocomplete(url, {
max: 20,
autoFill: true,
mustMatch: false, // 作用效果就是自动清空不匹配的输入
matchContains: false,
scrollHeight: 220,
formatItem: function(row, i, max) {
return "<I>"+row[0]+"</I>";
},
formatMatch: function(row, i, max) {
return row[0];
},
formatResult: function(row) {
return row[0];
}
});
});
2、返回json方式
A、修改前面Action类
List keys=new ArrayList();
while(rs.next()){
String v=rs.getString(2);
keys.add(v);
}
//返回json数据
resultJSON = new JSONObject();//JSONObject类来自json-lib-2.3库
writer.print(resultJSON.element("v", keys).toString());//会返回{“v”:[]}格式的数据
B、修改JSP中autocomplete插件方法
dataType:'json',//返回数据类型
parse:function(data){
var rows=[];
for(var i=0;i<data.v.length;i++){
//一定要按以下格式设置数据
rows[rows.length]={
data:data.v[i],
value:data.v[i],//值
result:data.v[i]//返回结果显示内容
};
}
return rows;
},
formatItem:function(row, i, n) {
return "<I>"+row+"</I>";
}