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" 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使用详解的更多相关文章
- jQuery插件- Autocomplete应用详解
项目中有时会用到自动补全查询,就像Google搜索框.淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能. auto ...
- jQuery插件制作方法详解
jQuery插件制作方法详解 jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...
- jQuery插件编写步骤详解
如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...
- JQuery插件jqModal应用详解(十二)
JqModal 是jQuery的一个插件,用来在web浏览器中显示自定义通告,而且它为通用窗口框架奠定了基础. 1. 多模型支持 2. 支持拖拽和重定义大小 3, 支持远程加载窗口内容(ajax和if ...
- 【转】JQuery上传插件Uploadify使用详解及错误处理
转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...
- 触碰jQuery:AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- 触碰jQuery:AJAX异步详解(转)
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
随机推荐
- (转)js prototype 详解
转载自:http://blog.csdn.net/chaojie2009/article/details/6719353(也是转载的.鄙视一下此人转载不著名出处.) 注意:必须带着怀疑的态度去看这篇文 ...
- ASP.NET程序代码优化的七个方面
ASP.NET程序性能优化的七个方面 一.数据库操作 1.用完马上关闭数据库连接 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比 ...
- NT kernel & System 占用占用80端口
问题: 1 运行'netstat -ano'发现80端口被pid=4的进程占用 2 打开任务管理器,发现pid=4的进程,其实是system进程,其对应的进程描述是NT kernel & sy ...
- panel控件 换行
Panel1.Controls.Add(new LiteralControl("<BR/>"));
- 整数转字符与字符转整数的C系统函数
atoi (表示 alphanumeric to integer)是把字符串转换成整型数的一个函数 http://baike.baidu.com/link?url=VTP54JT5-EY5TL0GFf ...
- Char型和string型字符串比较整理
1.赋值 char赋值: char ch1[] = "give me"; char ch2[] = "a cup"; strcpy(ch1,ch2); cout ...
- MAC OS X 快捷键(自己总结)
command+space 可以切换键盘输入法:长按可进入输入法列表,并在多个输入法之间切换,输入法列表会根据你最近使用过的输入法自动调整排序. HID:00 00 91 00 00 00 00 00 ...
- WPF中图形表示语法详解(Path之Data属性语法)
原文 http://blog.csdn.net/johnsuna/article/details/1885597 老规矩,看图说话. 先看显示效果:(图1) XAML(代码A):<Page xm ...
- xxx.java: Recompile with -Xlint:unchecked for details.
一.遇到问题:用ant执行jasperreport的samples/charts示例的build.xml时,无法编译,提示错误如下:javac: [javac] Compiling 2 sour ...
- CGFloat,CGPoint,CGSize,CGRect
1.数据类型: CGFloat: 浮点值的基本类型 CGPoint: 表示一个二维坐标系中的点 CGSize: 表示一个矩形的宽度和高度 CGRect: 表示一个矩形的位置和大小 typedef fl ...