jQuery插件autoComplete使用

安裝/須要引入的文件

<script type="text/javascript" src="../js/jquery-1.8.3.min.js.js"></script>

<link href="../plug/autoComplete/styles.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../plug/autoComplete/jquery.autocomplete.js"></script>

//這裏是個人相對路徑，讀者根據須要使用本身相應的正確路徑

---

 

<input type="text" id="autocomplete" value="所有" />

//使用插件的元素

---

 

好了，下面主要從兩個方面講解改插件使用方法：本地數據，ajax動態獲取數據

本地數據

var countries = [
　　{ value: 'American', data: 'us' },
　　{ value: 'Chinese', data: 'zh-cn' },
// ...
　　{ value: 'English', data: 'en' }
];

$('#autocomplete').autocomplete({
　　lookup: countries,
　　onSelect: function (suggestion) {
　　　　alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
　　}
});

//so easy！

---

 

ajax動態篩選服務器數據

$('#autocomplete').autocomplete({
　　//獲取服務器數據的url
　　serviceUrl: 'http://www.baidu.com/api',
　　//傳給服務器關鍵詞的參數名,相似於這個ajax請求$.post(url, {'filter' : keywords} ,function(){})中的filter
　　paramName : 'filter',
　　transformResult: function(response) {
　　//解析服務器傳過來的json字符串
　　var obj = $.parseJSON(response);
　　return {
　　　　suggestions: $.map(obj.list, function(dataItem) {
　　　　　　return { value: dataItem.right, data: dataItem.left };
　　　　})
　　};
},
　　//選中值後數據處理
　　onSelect: function (suggestion) {
　　　　beneficiaryCode=suggestion.data;
　　　　beneficiary=suggestion.value;
　　}
});