用jquery.autocomplete.js實現自動提示（類似google的）

最近幾天一致在看json，所謂json，其實底層也都是一些js實現的功能，通過它，我主要是做非同步提交，底層傳輸資料，不重新整理頁面的那種。當然，也有很多人用ajax來實現一些很有動態網頁，網上資料是多得不行，如果想研究的，就趕緊的吧，下面我結合這兩天看的json在struts1下面做一個自動提示的例子：

 

首先在頁面引入的js庫：

<script type='text/javascript' src='njs/jquery/jquery-autocomplete/jquery.autocomplete.js'></script>
 <link rel="stylesheet" type="text/css" href="njs/jquery/jquery-autocomplete/jquery.autocomplete.css" />

 

寫的指令碼：

jQuery(document).ready(function() {
 jQuery("#column04").autocomplete(//column04代表的是文字框的name
  "autocomplete_11.do",
  {
    multiple: true,       
     width:150,       
     max:50,       
     multipleSeparator: '|',      
     dataType: 'json',        //資料類型就是要json格式的
    //加入對返回的json對象進行解析函數，函數返回一個數組         
     parse: function(data) {  
     //alert(data);  
       var rows = [];     
       for(var i=0; i<data.length; i++){     
        rows[rows.length] = {      
          data:data[i],      
          value:data[i],      
          result:data[i]      
          };      
        }     
     return rows;     
       },     
     formatItem: function(row, i, n) {     
        return row;           
    }     
  }
 );
})

 

 

//struts-config.xml

<action path="/autocomplete_11" parameter="#" type="com.sitech.ismp.iimp.common.action.AutoCompleteAction" scope="request" validate="false">
   <forward name="default" path="/" />
  </action>

 

 

action:

public class AutoCompleteAction extends BaseAction {

public ActionForward autocomplete_11(ActionMapping mapping, ActionForm form,
    HttpServletRequest request, HttpServletResponse response)
    throws Exception {
   String keyword = request.getParameter("q");
    keyword=EscapeUnescape.unescape(keyword);
    System.out.println("q <<<<<<<<<<<<<<<<< :"+keyword);
   TblSYS_LOGINMSG user = (TblSYS_LOGINMSG) request.getSession()
          .getAttribute(TblSYS_LOGINMSG.SESSION_KEY);
   String login_id = null;
   if ((user != null) && !user.equals("")) {
    login_id = user.getLOGIN_ID();
   }
   SYS_LOGINMSGDao autoCompleteDao = new SYS_LOGINMSGDao();
   List autoCompleteList = autoCompleteDao.findTitleForJSName_deal(keyword,login_id);
   System.out.println("list:"+autoCompleteList.toString());
   try {
    if(autoCompleteList.size() > 0){
     response.setContentType("text/html; charset=GBK");
     PrintWriter out = response.getWriter();
    // System.out.println("result :"+IbsmUtil.getJsArrayFromListToList(autoCompleteList, "TITILE"));
     JSONArray jsonArray = JSONArray.fromObject(IbsmUtil.getJsArrayFromList_2(autoCompleteList, "TITILE"));
     System.out.println("json array :"+jsonArray.get(0));
     out.print(jsonArray.toString());
    // System.out.println("list value :"+jsonArray.toString());
     out.flush();
     out.close();
    }
    return null;
   } catch (Exception e) {
    e.printStackTrace();
    return null;
   }
  }

}

 

轉化為可以轉化為json格式的字串：

 

/**
 *
 */
package com.sitech.ismp.util.context;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import com.sitech.ismp.iimp.common.action.MyTitle;

/**
 * @author xietb
 *
 */
public class IbsmUtil {
 /*
  * 將SQLMAP結果清單轉化成js數組
  */
 public static String getJsArrayFromList_2(List result,String mapkey) {
  StringBuffer sbf = new StringBuffer();
  sbf.append("[");
  for(int i = 0;i<result.size();i++) {
   HashMap map = (HashMap)result.get(i);
   //System.out.println("map value is :"+map.toString());
   String value = map.get(mapkey).toString();
  // System.out.println("value"+i+":"+value);
   if(i == 0) sbf.append("/"").append(value).append("/"");
   else sbf.append(",").append("/"").append(value).append("/"");
  }
  sbf.append("]");
  return sbf.toString();
 }
 
 public static void main(String[] args) {
    String stest = "中文1234 abcd[]()<+>,.~//";
         System.out.println(stest);
         System.out.println(escape(stest));
         System.out.println(unescape(escape(stest)));

 }
}

 

 

需要指明幾點：

1、在傳過來的資料必須通過轉碼，轉成utf-8格式的，不然它傳過來的資料是通過json轉化過的

2、在擷取到資料後，我們要把資料轉化成json格式的資料，其實也就是字串，但最好是轉化成json格式的

3、在頁面擷取到資料的時候，要對資料進行轉化，轉化為json格式的，其實也就是js簡單數組。