安裝/需要引入的文件
<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" class="dataInput" 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;
}
});
效果：
更詳細使用情況：
https://github.com/devbridge/jQuery-Autocomplete