JQuery Autocomplete實戰

廢話不多說，先看效果！~

需要引入的資源如下

<link rel="stylesheet" href="/css/jquery.autocomplete.css" type="text/css">
<script type="text/javascript" src="/lib/jquery.min.js"></script><!--1.8.3-->
<script type="text/javascript" src="/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

這東西沒啥技術含量，就是麻煩，記錄一下避免以后在同樣的問題上浪費時間。