安装/需要引入的文件

<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

jQuery插件autoComplete使用详解的更多相关文章

  1. jQuery插件- Autocomplete应用详解

    项目中有时会用到自动补全查询,就像Google搜索框.淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能. auto ...

  2. jQuery插件制作方法详解

        jQuery插件制作方法详解   jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...

  3. jQuery插件编写步骤详解

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

  4. JQuery插件jqModal应用详解(十二)

    JqModal 是jQuery的一个插件,用来在web浏览器中显示自定义通告,而且它为通用窗口框架奠定了基础. 1. 多模型支持 2. 支持拖拽和重定义大小 3, 支持远程加载窗口内容(ajax和if ...

  5. 【转】JQuery上传插件Uploadify使用详解及错误处理

    转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...

  6. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  7. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  8. 触碰jQuery:AJAX异步详解(转)

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  9. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

随机推荐

  1. (转)js prototype 详解

    转载自:http://blog.csdn.net/chaojie2009/article/details/6719353(也是转载的.鄙视一下此人转载不著名出处.) 注意:必须带着怀疑的态度去看这篇文 ...

  2. ASP.NET程序代码优化的七个方面

     ASP.NET程序性能优化的七个方面      一.数据库操作 1.用完马上关闭数据库连接 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比 ...

  3. NT kernel & System 占用占用80端口

    问题: 1 运行'netstat -ano'发现80端口被pid=4的进程占用 2 打开任务管理器,发现pid=4的进程,其实是system进程,其对应的进程描述是NT kernel & sy ...

  4. panel控件 换行

    Panel1.Controls.Add(new LiteralControl("<BR/>"));

  5. 整数转字符与字符转整数的C系统函数

    atoi (表示 alphanumeric to integer)是把字符串转换成整型数的一个函数 http://baike.baidu.com/link?url=VTP54JT5-EY5TL0GFf ...

  6. Char型和string型字符串比较整理

    1.赋值 char赋值: char ch1[] = "give me"; char ch2[] = "a cup"; strcpy(ch1,ch2); cout ...

  7. MAC OS X 快捷键(自己总结)

    command+space 可以切换键盘输入法:长按可进入输入法列表,并在多个输入法之间切换,输入法列表会根据你最近使用过的输入法自动调整排序. HID:00 00 91 00 00 00 00 00 ...

  8. WPF中图形表示语法详解(Path之Data属性语法)

    原文 http://blog.csdn.net/johnsuna/article/details/1885597 老规矩,看图说话. 先看显示效果:(图1) XAML(代码A):<Page xm ...

  9. xxx.java: Recompile with -Xlint:unchecked for details.

    一.遇到问题:用ant执行jasperreport的samples/charts示例的build.xml时,无法编译,提示错误如下:javac:    [javac] Compiling 2 sour ...

  10. CGFloat,CGPoint,CGSize,CGRect

    1.数据类型: CGFloat: 浮点值的基本类型 CGPoint: 表示一个二维坐标系中的点 CGSize: 表示一个矩形的宽度和高度 CGRect: 表示一个矩形的位置和大小 typedef fl ...