jquery.autocomplete插件完美应用实例

Action方法

public void queryAnnListByAjax()
    {
        voiceDefList = sysVoiceServ.querySysAnnList(voiceDef);
        JSONArray jsonArr = JSONArray.fromObject(voiceDefList);

        PrintWriter writer = null;

        try
        {
            writer = getResponse().getWriter();
            writer.print(jsonArr);
        }
        catch (IOException e)
        {
            e.getMessage();
        }
        finally
        {
            if (writer != null)
            {
                writer.close();
            }
        }
    }

 

页面js

$(document).ready(function(){

         $('#annID').autocomplete("nts/queryAnnListByAjax.action",  //url路径
          {
             max: 10,    //列表里的条目数
             minChars: 1,    //自动完成激活之前填入的最小字符
             width: 160,     //提示的宽度，溢出隐藏
             scrollHeight: 500,   //提示的高度，溢出显示滚动条
             matchSubset: false, 
             //mustMatch: true,
             //matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
             autoFill: false,    //自动填充
             dataType: 'json',   //数据类型,json ||  xml
             extraParams:{'voiceDef.annID':function() { return $('#annID').val();},
            	 'voiceDef.userType':function() { return $('#userType').val();},
            	 'voiceDef.serviceID':function() { return $('#serviceID').val();},
            	 'voiceDef.annType':function() { return $('#annType').val();},
            	 'voiceDef.subScriberID':function() { return $('#subScriberID').val();}},   //传参,后台查询的条件
             parse: function(data) {   //重写parse方法,用来解析json
            	 	var par = eval(data);
            		var rows = [];
            		if (par != null && par != "undfined")
            		{
            			for(var i=0; i<par.length; i++){ 
                     		rows[i] = { 
                     			data:par[i],
                     		    value:par[i], 
                     		    result:par[i].annID     
                        		};      
                     	} 
            		}
             		    
               	return rows;  
             },
             formatItem: function(row) {
             	return row.annID+" ["+row.annDesc+"]";   //解释界面显示,看下图片你就明白了
             }
         }).result(function(event, row, formatted) {   //选中触发的方法
         	$('#annID').val(row.annID);     
         });})

 页面jsp标签

<isap:text id="annID" name="voiceDef.annID" value="${voiceDef.annID}" cssclass="mo_text_box_135" maxlength="5" title="BME.ANNOUNCEMENT.ANNID.VALUE.TIPS"
                        onkeypress="if (!/[0-9A-Z]/.test(String.fromCharCode(event.keyCode)))event.keyCode=0"></isap:text><span style="color: red">*</span>

效果示例图：