通過servlet 和action 來使用jquery.autocomplete

第一種爲servlet：

js:

$(document).ready(function(){
   var basePath=getRootPath();
  var url=basePath+"/queryIDByNameServlet";
  $("#name").autocomplete(url, {
   max: 12, //列表裏的條目數
   minChars: 0, //自動完成激活之前填入的最小字符
   width: 300, //提示的寬度，溢出隱藏
   scrollHeight: 300, //提示的高度，溢出顯示滾動條
   matchContains: true, //包含匹配，就是data參數裏的數據，是否只要包含文本框裏的數據就顯示
   autoFill: false, //自動填充
   //dataType: 'json',
   //如果需要另外傳值給action的話可以用這樣的方式,如果只是把input裏面的值傳遞給action的話,可以不寫
   extraParams: {   
             sname: function(){return $("#sname").val();},
     idcard: function(){return $("#idCard").val();},
             enid: function(){return $("#enId").val();}
     
         },
       //進行對返回數據的格式處理
         parse : function(data) {  
             return $.map(eval(data), function(row) {  
                         return {  
                             data : row,  
                             value : row.name,  
                             result : row.name  
                         }  
                     });  
         },  

         formatItem: function(row, i, max) {     
             return "姓名："+row.name+", 身份證號："+row.card;     
           },     
           formatMatch: function(row, i, max) {     
             return row.name+""+row.card;     
           },     
           formatResult: function(row) {     
             return row.name;    
           }     
  }).result(function(event,row,formatted){
   $("#card").val(row.card);
  }); 
  
   
});

servlet:

resp.setContentType("text/html;charset=UTF-8");
  PrintWriter out=resp.getWriter();
  List<Stuff> list=null;
   try {
    String s=req.getParameter("sName");
    String c=req.getParameter("idCard");
    String id = req.getParameter("enid");
    String sname=new String(s.getBytes("ISO-8859-1"),"UTF-8");
    String idcard=new String(c.getBytes("ISO-8859-1"),"UTF-8");
    String enid = new String(id.getBytes("ISO-8859-1"),"UTF-8");
    int eid=Integer.parseInt(enid);
    
    StuffService ss= (StuffService) applicationContext.getBean("stuffService");
    
    
    
    list=ss.queryIdcardByName(sname, idcard, eid);
    if(0<list.size()){
     Iterator it=list.iterator();
     StringBuffer stringBuffer = new StringBuffer();  
           stringBuffer.append("[");  
           while(it.hasNext()){
       Stuff stuff=(Stuff)it.next();
       stringBuffer.append("{ name: '" + stuff.getSname() + "', card: '" + stuff.getIdCard() + "' }, ");  
     }
     if(stringBuffer.length() > 3)
      stringBuffer.replace(stringBuffer.length()-3, stringBuffer.length(), "}");
       stringBuffer.append("]"); 
       System.out.println(stringBuffer);  
            out.print(stringBuffer);  
            out.flush();  
            out.close();
    }else{
     out.print("false");
    }
    }catch(Exception e){e.printStackTrace();
    }finally{
     out.flush();  
     out.close();
    }

第二種action：

js:

$("#sname").autocomplete(url, {
   max: 12, //列表裏的條目數
   minChars: 0, //自動完成激活之前填入的最小字符
   width: 300, //提示的寬度，溢出隱藏
   scrollHeight: 300, //提示的高度，溢出顯示滾動條
   matchContains: true, //包含匹配，就是data參數裏的數據，是否只要包含文本框裏的數據就顯示
   //autoFill: false, //自動填充
   //dataType: 'json',
   //如果需要另外傳值給action的話可以用這樣的方式,如果只是把input裏面的值傳遞給action的話,可以不寫
   extraParams: {   
             sName: function(){return $("#sname").val();},
     idcard: function(){return $("#idCard").val();}
     
         },
       //進行對返回數據的格式處理
         parse : function(test) { 
          data = test.list;
          var rows = [];
             for(var i=0; i<data.length; i++)
             {
                  rows[rows.length] =
                  {
                    data:data[i],
                    value:data[i].sname,
                    result:data[i].idCard //result裏面顯示的是要返回到列表裏面的值 
                  };
             }
             return rows;
        },  
        formatItem: function(row, i, max) {     
              return "姓名："+row.sname+", 身份證號："+row.idCard;     
        },     
           formatMatch: function(row, i, max) {     
             return row.sname+row.idCard;     
           },     
           formatResult: function(row) {     
             return row.sname;    
           }     
   }).result(function(event,row,formatted){
    $("#sname").val(row.sname);
    $("#idCard").val(row.idCard);
   });

 

action 方法：

  String staffName=new String(sName.getBytes("ISO-8859-1"),"UTF-8");
    this.list=this.stuffService.queryIdcardByName(staffName, idCard, enid);

這個list要定義setter getter方法

 

struts.xml:

 

<action name="autotest" class="autotestAction">
           <result name="success" type="json"></result>
       </action>

 

參考文章：http://blog.csdn.net/huangxu0311/archive/2010/04/28/5539413.aspx；