现在的位置: 首页 > 综合 > 正文

用jquery.autocomplete.js实现自动提示(类似google的)

2012年01月09日 ⁄ 综合 ⁄ 共 3714字 ⁄ 字号 评论关闭

最近几天一致在看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简单数组。

抱歉!评论已关闭.