基于jquery的自动完成插件jquery.autocomplete.js

项目需要一个自动完成功能的text，要求实时从服务端获取符合条件的数据。

想到jquery貌似有类似功能的插件：

1.需要下面几个文件：jquery-1.3.2.js，jquery.autocomplete.js，jquery.autocomplete.css。

2.功能要求：随着输入的内容不同不断匹配符合条件的数据项，这就要求动态获取参数。而jquery传递参数可以用：

extraParams: {area:function(){return $('#id').val();}}

不过经过使用发现，这样不能动态获取参数，所以修改了一下jquery.autocomplete.js的源码为其添加了一个onBegin属性：

(1) 为$.Autocompleter.defaults添加一个属性：onBegin: null,大约在400行；

(2)调用方法:

$("#id").autocomplete(url, {
        mustMatch: false,  //是否完全匹配      
        width: 220, //宽度       
        max: 10,  //最大显示行数
        onBegin: function(options) {
           var va= $("#id").val();
           if (va&& va!= "")      options.extraParams.va=va;            
           return options;        
           },
            parse: function(data) {                 
  var par=eval(data);
  var re=[];
  if(par!=null&&par!='undfined'){
  for(var i=0;i<par.length;i++){
  re[i]={data:par[i],value:par[i],result:par[i]};//data是数据项，value是值，result是显示项，例如如果数据项为A，那value可以是A.id,result是A.text。
  }
  return re;
  }else{
  return [];
  }
  },
       formatItem: function(item) {
  return  item;
       }
         });

 

(3)后台方法:

public void ajaxQuery(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)
   throws Exception {
  String va= request.getParameter("va");
                //长度超过5位开始查询
  if (va!= null && va.length() >= 5) {
   response.setContentType("text/html; charset=GBK");
   PrintWriter out = response.getWriter();
   
   List list = queryService.ajaxQuery(va);
   String retValue = "[";
   for (int i = 0; i < list.size(); i++) {
       retValue += retValue.length() > 1 ? ",'" 
                              + list.get(i) + "'": "'" + list.get(i) + "'";
   }
   if (retValue.length() > 1) {
    out.print(retValue + "]");
   }
   out.flush();
   out.close();
  }
 }