jQuery.Autocomplete与struts2的整合

ssh中jquery autocomplete使用示例

jQuery.Autocomplete与struts2的整合

 

以下是我的实践,不过不知道为什么autocomplete功能不能从返回的json对象中选择包含输入字段的一项,例如source:person!ajaxSelectPerson ,这个时候person! ajaxSelectPerson返回的json,当输入wang时,当source: ["张三","李斯","王五","赵六","黑龙","白海","湘伦"]时

 

package com.maple.action;
 
  import java.io.PrintWriter;
  import java.util.ArrayList;
  import java.util.Date;
  import java.util.List;
 
  import net.sf.json.JSONArray;
 
  import org.apache.struts2.ServletActionContext;
  import org.apache.struts2.convention.annotation.ResultPath;
 
  import com.opensymphony.xwork2.ActionSupport;
 
 @ResultPath("/")
  // @Results({@Result(name="")})
  public  class PersonAction  extends ActionSupport{
      public String result;
      public String getResult() {
          return result;
     }
      public  void setResult(String result) {
          this.result = result;
     }
      public String autocom()
     {
         result="[\"zhangsan\",\"lisi\",\"wangwu\",\"zhangsan\",\"sun\",\"zhouw\",\"hello\",\"world\",\"nihsi\"]";
          return "autocom";
     }
      public String ajaxSelectPerson(){ 
          try { 
         String search = ServletActionContext.getRequest().getParameter("term"); 
         System.out.println(search);
  //         if(search==null||search.length()==0) return null; 
         List<String> names =  new ArrayList<String>(); 
                            names.add("zhangsan"); 
                            names.add("lisi"); 
                            names.add("wangwu"); 
                            names.add("zhangsan"); 
                            names.add("sun"); 
                            names.add("zhouw"); 
                            names.add("hello"); 
                            names.add("world"); 
                            names.add("nihsi"); 
         ServletActionContext.getResponse().setCharacterEncoding("UTF-8"); 
         JSONArray json = JSONArray.fromObject(names); 
         PrintWriter out = ServletActionContext.getResponse().getWriter(); 
         out.print(json.toString()); 
         System.out.println( new Date()+"  "+json);
                 out.flush(); 
                 out.close(); 
                  return  null; 
         }  catch (Exception e) { 
         e.printStackTrace(); 
         } 
          return  null; 
     } 
 
 }

  <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

  <%
  String path = request.getContextPath();
  String basePath = request.getScheme()+ " :// "+request.getServerName()+ " : "+request.getServerPort()+path+ " / ";
  %>
 
  <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
  < html >
    < head >
      < base  href ="<%=basePath%>" >
        < link  rel ="stylesheet"  href ="development-bundle/themes/base/jquery.ui.all.css"   />
           < style >
     .ui-autocomplete {
         max-height:  100px;
         overflow-y:  auto;
          /*  prevent horizontal scrollbar  */
         overflow-x:  hidden;
     }
     .ui-autocomplete {
         height:  100px;
     }
      </ style >
      < script  src ="js/jquery-1.8.2.min.js" ></ script >
      < script  src ="js/jquery-ui-1.8.24.custom.min.js" ></ script >
      < script > source:"hello-world!returnData"
     $( function() {
          var availableTags = [${theData} ];
         $( "#tags" ).autocomplete({
             source: ["张三","李斯","王五","赵六","黑龙","白海","湘伦"] // "person!ajaxSelectPerson",//
         }); /**/
     });
      </ script >
  </ head >
  < body >
  
  < div  class ="ui-widget" >
      < label  for ="tags" >Tags:  </ label >
      < input  id ="tags"   />
  </ div >
    </ body >
  </ html >