码迷,mamicode.com
首页 > Web开发 > 详细

jQuery插件autoComplete使用

时间:2015-11-10 16:07:44      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

安装/需要引入的文件

<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;
  }
});

 

技术分享

技术分享

jQuery插件autoComplete使用

标签:

原文地址:http://www.cnblogs.com/pingfan/p/4953152.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!