JQueryAutocomplete实战-创新互联

客户名

    
    

Javascipt代码

$("#q-customerName").autocomplete("/CustomerName/getCustomerNameSuggestion.do",{
max:10,//最多5条记录
minChars:1,
scrollHeight: 250,
width:206,
dataType:'json',//返回的数据类型为JSON类型
extraParams: {
    "customerName": function () {
	return encodeURIComponent($("#q-customerName").val());
    }
},
parse:function(data) {//解释返回的数据，把其存在数组里
    var parsed = [];
    for (var i = 0; i < data.length; i++) {
	parsed[parsed.length] = {
	    data: data[i],
	    key: data[i].key,
	    value: data[i].value,
	    result: data[i].value //返回的结果显示内容
	};
    }
    if (data.length == 0) {
	parsed.push({
	    data: {
		"key": "0",
		"value": "无搜索结果"
	    },
	    key: "0",
	    result: "无搜索结果"
	});
    }
    return parsed;
},
formatItem: function(item) {//显示下拉列表的内容
    return item.value;
},
formatMatch: function(item) {
    return item.value;
},
formatResult: function(item) {
    return item.value;
}
}).result(function(event, item, formatted) {//把返回的结果内容显示在其他文本框上
$("#q-customerId").val(item.key);
if(item.key == 0){
    $("#q-customerName").val("");
}
});

后端返回的json数据格式如下

[
    {
        "key": "5133",
        "value": "上海**有限公司"
    },
    {
        "key": "5197",
        "value": "上海**用品有限公司"
    },
    {
        "key": "5202",
        "value": "上海**传播有限公司"
    },
    {
        "key": "5234",
        "value": "上海**用品有限公司"
    },
    {
        "key": "5319",
        "value": "上海**用品有限公司"
    },
    {
        "key": "5402",
        "value": "上海**用品有限公司"
    },
    {
        "key": "5500",
        "value": "上海**有限公司"
    },
    {
        "key": "5581",
        "value": "上海**用品有限公司"
    }
]

Firefox下有个小bug，使用搜狗输入法输入中文时不触发antocomplete事件。正在解决。

测试发现JQuery1.9及以上不兼容，项目中使用的是1.8.3

这东西没啥技术含量，就是麻烦，记录一下避免以后在同样的问题上浪费时间。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。