jquery Autocomplete使用

插件地址：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

这个文档看起来不是那么的顺眼，自己琢磨了一下

$(".autocomplete").autocomplete("/json/product_json.action", {
	 max: 			10, // 查询条数
	 autoFill: 		false, // 是否自动填充输入框
	 scroll:			false,
	 matchContains:	true,
	 width:			"660px",
        parse: function(data){    // 自定义json返回数据解析，因为我服务端用的是struts2，怎么也找不到如果直接返回数据的方法，只能返回json对象，必须得用data.xxx方法取数组
            var rows = [];    
            var $arr = data.products;    
            for(var i=0; i<$arr.length; i++){    
                rows[rows.length] = {    
	           data:$arr[i], 
        	   value:$arr[i].pinyin, // 与输入内容比较的变量，我用的拼音
                   result:$arr[i].name // 显示到输入的内容
                };    
            }    
            return rows;    
        },
        formatItem: function(data, i, n, value) { // 找到匹配内容后的页面显示格式
return "<img width='80' height='80' src='/upload/" + data.imgPath + "'/> " + data.name;
        }
});
	$(".autocomplete").result(function(event, data, formatted) {
		$("#td-proimg-"+$(this).attr("data-index")).html('<img width="80" height="80" src="/upload/'+data.imgPath+'">');
	$("#pro"+$(this).attr("data-index")).val(data.id);
});

<input class="form-control autocomplete" data-index="0" placeholder="输入产品拼音首字母进行检索"/>

转载于:https://my.oschina.net/illone/blog/174723