JQuery Autocomplete实战

需要引入的资源如下

<link rel="stylesheet" href="/css/jquery.autocomplete.css" type="text/css"><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/lib/jquery.min.js"></script><!--1.8.3--><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/js/jquery.autocomplete.js"></script>

前端代码

<div class="control-group span6"><label class="control-label">客户名</label><div class="controls">    <input type="text" id="q-customerName" name="customerName" class="form_value ac_input" autocomplete="off">    <input type="hidden" id="q-customerId" name="customerId" class="form_value" validate="n" value="0"><!-- 默认值为0 --></div></div>

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

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