jQuery.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);
});

 

上一篇:表单


下一篇:jQuery.AutoComplete 自动补全插件