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

 }