jquery autoComplete插件完成自动提示与填充效果

由于最近项目要做到自动提示与填充其他信息的功能,就想到了jquery的插件.进而就找到了jquery autoComplete这个插件,然后使用时就没有想象的那么简单.

遇到的问题:

一.从服务器返回的json,被当作一个字符串来处理了.

二.乱码的问题

三.这个插件本身没有提供选择后处理事件,导致还不能实现填充其他的信息的功能..

 

其中html页面代码如下

 
<div id="content">

<form autocomplete="off">
<p>
<label>关键词:</label>
<input type="text" id="suggest1" name="suggest1"  />
ID:<input type="text"id="res">

Keyword:<input type="text"id="ress">
</p>
</form>
</div>

 

 

 

后来经过不断的了解.解决方法如下

问题1:自己重写jquery autoComplete的parse方法.对返回的json字符串进行eval(json)处理,然后自己再重新封装一下

  

 
/**
* 注意：Action里默认的接受参数为"q",这个参数与表单的name属性没有必要的联系
* 在Action里面查找时,不要采用分页查找
* 
* */
$().ready(function() {  

    $("#suggest1").autocomplete(  // $("#suggest1"):  id为suggest1的对象
        "http://www.cnblogs.com/../keyword.do?method=getSuggest",  //url
        {  
         max: 10,   
        scroll: false,   
       width: 162,
matchSubset:false,
extraParams: {},//这里传递其他的参数
parse: function(data) {　　　　　　　//重写parse方法
var par=eval(data);
var re=[];
for(var i=0;i<par.length;i++)
{
re[i]={
data:par[i],//json对象
value:par[i].id,//这里一般是对象的唯一标识
result:par[i].keyWord   //显示在文本框的内容
};
}
return re;

},
confirmSelect:function(select){$('#res').val(select.data.id);$('#ress').val(select.data.keyWord);},    //选择时的处理事件，其中select.data为当前选择的json对象．自动填充其他信息就是在这里实现
formatItem: function(row, i, max) {
return  row.keyWord ; //item的显示内容与样式   //max:总共的记录数,  i:表示第i条记录  row:为当前记录的json对象}
        }  
    );  


 
 

问题2的解决:其实很简单,只要在Action里面获取参数时处理下就ok了,以下代码还包括了List到JSon的转换

    public ActionForward getSuggest(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws Exception {
        //jQuery Autocomplete默认接受参数为"q"
        String keyword=new String(request.getParameter("q").getBytes("iso8859-1"),"utf-8"); 
        //通过模糊查找
        List result=this.keywordService.findLikeKeyword(keyword);                            
        response.setContentType("text/html; charset=utf-8");  
        try
        {
            PrintWriter out = response.getWriter();
          //将List转化为json类型
            JSONArray jsonArray = JSONArray.fromObject(result);                   
            out.print(jsonArray.toString());     
            out.flush();
            out.close();
        }
        catch(Exception e)
        {
            e.printStackTrace();
        }
        return null;
    }

问题三的解决:由于原本插件并没有提供选择后的处理事件.那得自己在jquery-autocomplete.js代码里面自己进行增加.

找到$.Autocompleter.defaults,就会看到里面有很多默认的参数,其实这里面的参数,大家都可以在绑定autocomplete修改的.

其实,在前面,你是否发现了我的绑定autocomplete时,多了一个confirmSelect的函数参数呢..然后在jquery-autocomplete.js的selectCurrent方法增加对这个方法的调用

 
$.Autocompleter.defaults = {
 inputClass: "ac_input",
 resultsClass: "ac_results",
 loadingClass: "ac_loading",
 minChars: 1,
 delay: 400,
 matchCase: false,
 matchSubset: true,
 matchContains: false,
 cacheLength: 10,
 max: 100,
 mustMatch: false,
 extraParams: {},
 selectFirst: true,
 formatItem: function(row) { return row[0]; },  
 formatMatch: null,
 confirmSelect:function(select){},  //注意,这个方法是我自己增加进去的
 autoFill: false,
 width: 0,
 multiple: false,
 multipleSeparator: ", ",
 highlight: function(value, term) {
  return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
 },
    scroll: true,
    scrollHeight: 180
};
 
 
function selectCurrent() {
  var selected = select.selected();
  if( !selected )
   return false;
  
  var v = selected.result;
  previousValue = v;
  
  if ( options.multiple ) {
   var words = trimWords($input.val());
   if ( words.length > 1 ) {
    var seperator = options.multipleSeparator.length;
    var cursorAt = $(input).selection().start;
    var wordAt, progress = 0;
    $.each(words, function(i, word) {
     progress += word.length;
     if (cursorAt <= progress) {
      wordAt = i;
      return false;
     }
     progress += seperator;
    });
    words[wordAt] = v;
    // TODO this should set the cursor to the right position, but it gets overriden somewhere
    //$.Autocompleter.Selection(input, progress + seperator, progress + seperator);
    v = words.join( options.multipleSeparator );
   }
   v += options.multipleSeparator;
  }
  
  var se=selected;　　　　　　　　　　//注意,在这里增加对方法的调用
  options.confirmSelect(se);
  
  $input.val(v);
  hideResultsNow();
  $input.trigger("result", [selected.data, selected.value]);
 
  return true;
 }


 

到这里,基本上已经结束了.

所需的功能也已经实现

效果如下