安装/需要引入的文件
<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; }});
转载于:https://www.cnblogs.com/pingfan/p/4953152.html
相关资源：jquery的autocomplete(自动补全)插件