20151217jqueryUI--自动补全工具
2015-12-17 20:42
1056 查看
自动补全(autocomplete),是一个可以减少用户输入完整信息的 UI 工具。一般在输
入邮箱、搜索关键字等,然后提取出相应完整字符串供用户选择。
一. 调用 autocomplete()方法
二. 修改 autocomplete()样式
由于 autocomplete()方法是弹窗, 然后鼠标悬停的样式。 我们通过 Firebug 想获取到悬停
时背景的样式,可以直接通过 jquery.ui.css 里面找相应的 CSS。
注意:其他修改方案类似。
三. autocomplete()方法的属性
自动补全方法有两种形式: 1.autocomplete(options), options 是以对象键值对的形式传参,
每个键值对表示一个选项; 2.autocomplete('action', param), action 是操作对话框方法的字符
串, param 则是 options 的某个选项。
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217203744927-1321828095.png)
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217203805537-16390960.png)
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217203843146-1884985675.png)
四. autocomplete()方法的事件
除了属性设置外, autocomplete()方法也提供了大量的事件。 这些事件可以给各种不同状
态时提供回调函数。 这些回调函数中的 this 值等于对话框内容的 div 对象, 不是整个对话框
的 div。
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217203930302-1860783446.png)
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217203953131-188244453.png)
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217204030146-1901510259.png)
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217204050193-2134090785.png)
五. autocomplete 中使用 on()
在 autocomplete 的事件中,提供了使用 on()方法处理的事件方法。
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217204134162-1936595334.png)
入邮箱、搜索关键字等,然后提取出相应完整字符串供用户选择。
一. 调用 autocomplete()方法
$('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], });
二. 修改 autocomplete()样式
由于 autocomplete()方法是弹窗, 然后鼠标悬停的样式。 我们通过 Firebug 想获取到悬停
时背景的样式,可以直接通过 jquery.ui.css 里面找相应的 CSS。
//无须修改 ui 里的 CSS,直接用 style.css 替代掉 .ui-menu-item a.ui-state-focus { background:url(../img/ui_header_bg.png); }
注意:其他修改方案类似。
三. autocomplete()方法的属性
自动补全方法有两种形式: 1.autocomplete(options), options 是以对象键值对的形式传参,
每个键值对表示一个选项; 2.autocomplete('action', param), action 是操作对话框方法的字符
串, param 则是 options 的某个选项。
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217203744927-1321828095.png)
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217203805537-16390960.png)
$('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], disabled : false, minLength : 2, delay : 50, autoFocus : true, });
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217203843146-1884985675.png)
$('#email').autocomplete({ position : { my : 'left center', at : 'right center' } });
四. autocomplete()方法的事件
除了属性设置外, autocomplete()方法也提供了大量的事件。 这些事件可以给各种不同状
态时提供回调函数。 这些回调函数中的 this 值等于对话框内容的 div 对象, 不是整个对话框
的 div。
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217203930302-1860783446.png)
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217203953131-188244453.png)
$('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], disabled : false, minLength : 1, delay : 0, focus : function (e, ui) { ui.item.value = '123'; }, select : function (e, ui) { ui.item.value = '123'; }, change : function (e, ui) { alert(''); }, search : function (e, ui) { alert(''); }, });
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217204030146-1901510259.png)
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217204050193-2134090785.png)
//关闭自动补全 $('#email').autocomplete('close'); //禁用自动补全 $('#email').autocomplete('disable'); //启用自动补全 $('#email').autocomplete('enable'); //删除自动补全 $('#email').autocomplete('destroy'); //获取自动补全 jQuery 对象 $('#email').autocomplete('widget'); //设置自动补全 search $('#email').autocomplete('search', ''); //获取某个 options 的 param 选项的值 var delay = $('#email').autocomplete('option', 'delay'); alert(delay); //设置某个 options 的 param 选项的值 $('#email').dialog('option', 'delay', 0);
五. autocomplete 中使用 on()
在 autocomplete 的事件中,提供了使用 on()方法处理的事件方法。
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217204134162-1936595334.png)
$('#reg').on('autocompleteopen', function () { alert('打开时触发! '); });
![](http://images2015.cnblogs.com/blog/778706/201512/778706-20151217204205912-1944098508.png)
相关文章推荐
- 使用jquery.qrcode生成二维码
- 20151217jqueryUI学习笔记
- jquery检测浏览器类型
- 20151217jquery学习笔记--注册表单
- 解决jQuery-validation框架remote校验只能返回true、false问题
- jquery选择器
- jquery获得所有重名的文本框值
- jQuery数组($.grep,$.each,$.inArray,$.map)处理函数详解
- target与currentTarget的区别(jqueryui方式获取z-Index)
- jQuery的主要用法
- jQuery选择器总结
- jQuery学习笔记(一)
- $(function(){…});与(function($) {…})(jQuery);
- tabs选项卡切换效果(jquery版)
- Jquery插件-笔记
- jquery hasClass、removeClass、addClass方法
- jquery获取instagram图片并添加fancybox效果
- jquery获取instagram图片并添加fancybox效果
- jquery实现简单的图片查看器
- JQuery中对option的添加、删除、取值