Struts2+jQuery_autoComplete.js实现自动填充的完整示例

本文介绍了一个基于jQuery和Struts框架实现的自动补全搜索功能。通过客户端JavaScript与服务器端交互，完成输入框的自动补全效果。该功能利用JSON格式传输数据，并通过特定的解析方法将服务器返回的数据展示在前端。

js代码:

        $(document).ready(function() {

$("#autocomplete").autocomplete("autoComplete.action", {
minChars : 1,
max : 15,
matchContains: true,//包含即可自动填充，无论是一个单字母还是一个字符串都可以匹配
mustMatch: false, 必须设置为false
dataType : "json",
extraParams: {
search: function() { return $("#autocomplete").val(); }
        },
parse : function(data) {
   var rows = [];
   var d = data;
   for ( var i = 0; i < d.length;i++) {
    rows[rows.length] = {
     data : d[i],
     value : d[i],
     result : d[i].bname

    };
   }
   return rows;
},
formatItem : function(item){
   return "<div>"+"<font color='gray'>"+item.bname+"</font>"+"</div>";
}
})
});

struts.xml:

        <action name="autoComplete" class="BookDetailAction" method="autoComplete">
                   <result name="success" type="json">
                        <param name="root">result</param>
                   </result>
          </action>

Action代码：

         public String autoComplete() throws Exception {
HttpServletResponse response = ServletActionContext.getResponse();
HttpServletRequest request = ServletActionContext.getRequest();
response.setCharacterEncoding("utf-8");
String search = request.getParameter("search");
search= new String(search.getBytes("ISO-8859-1"),"UTF-8");
List<Bookdetail> books = new ArrayList<Bookdetail>();
if (Utils.isAvailable(search)) {
     String key = search.trim();
      books = bookService.autoComplete(key);
}
Gson gson=new Gson();
String result = gson.toJson(books);
        response.setContentType("text/json;charset=utf-8");
        response.setHeader("Chache=Control", "no-cache");
        PrintWriter outWriter = response.getWriter();
        outWriter.print(result);
        outWriter.flush();
        outWriter.close();
return SUCCESS;
}