jquery.autocomplete 使用

钱跃
2023-12-01
  $(document).ready(function () {
        	         $.ajax({
        	            type: "POST",
        	            contentType: "application/json",
        	            url: "url",
        	            data: "{}",
        	            dataType: "json",
        	             success: function (msg) {
        	                var datas = msg;
                	        $("#inputName").autocomplete(datas,{
                	            minChars: 0,//自动完成激活之前填入的最小字符
                	              max:12,//列表条目数
                	              width: 400,//提示的宽度
                	              scrollHeight: 300,//提示的高度
                	              matchContains: true,//是否只要包含文本框里的就可以
                	              autoFill:false,//自动填充
                	              cacheLength:0, //不设置缓存
                                      formatItem: function(data, i, max) {//格式化列表中的条目 row:条目对象,i:当前条目数,max:总条目数
                	return i + '/' + max + ':"' + data.prop+ '"[' + data.prop + ']';
                	            },
                	            formatMatch: function(data, i, max) {//配合formatItem使用,作用在于,由于使用了formatItem,所以条目中的内容有所改变,而我们要匹配的是原始的数据,所以用formatMatch做一个调整,使之匹配原始数据
                	return data.prop + data.prop ;
                	            },
                	            formatResult: function(data) {//定义最终返回的数据,比如我们还是要返回原始数据,而不是formatItem过的数据
                	return data.prop;
                	            }
                	        }).result(function(event,data,formatted){
                                          //do something here
                	        
                	        });
                	        
        	             }
        	        });
        	         
        	     });

以上为一次性取出所有数据在前台查找。

		$("#id").autocomplete("url", {
			minChars : 1,//自动完成激活之前填入的最小字符  
			max : 12,//列表条目数  
			width : 320,//提示的宽度  
			scrollHeight : 300,//提示的高度  
			matchContains : true,//是否只要包含文本框里的就可以  
			autoFill : false,//自动填充                                        
			cacheLength : 0, //不设置缓存  
			extraParams : {
				hylb : function() {
					return $("#id").val();
				}
			},
			parse : function(data) {//解释返回的数据,把其存在数组里   
				var parsed = [];
				for (var i = 0; i < data.length; i++) {
					parsed[parsed.length] = {
						data : data[i],
						value : data[i].prop,
						result : data[i].prop
					//返回的结果显示内容   
					};
				}
				return parsed;
			},
			formatItem : function(data, i, max) {//格式化列表中的条目 row:条目对象,i:当前条目数,max:总条目数   
				return i + '/' + max + ':' + data.dwmc;
			},
			formatMatch : function(data, i, max) {//配合formatItem使用,作用在于,由于使用了formatItem,所以条目中的内容有所改变,  
													//而我们要匹配的是原始的数据,所以用formatMatch做一个调整,使之匹配原始数据   
				return data.prop + data.prop;
			},
			formatResult : function(data) {//定义最终返回的数据,比如我们还是要返回原始数据,而不是formatItem过的数据   
				return data.prop;
			}
		}).result(function(event, data, formatted) {
		
		});


后台struts2 直接返回json对象。

 类似资料: