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>";?????
?}?