学习要点:
1.调用 autocomplete()方法
2.修改 autocomplete()样式
3.autocomplete()方法的属性
4.autocomplete()方法的事件
5.autocomplete 中使用 on()
自动补全(autocomplete),是一个可以减少用户输入完整信息的 UI 工具。一般在输入邮箱、搜索关键字等,然后提取出相应完整字符串供用户选择。
一.调用 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 的某个选项。
$('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], disabled : false, minLength : 2, delay : 50, autoFocus : true, });
$('#email').autocomplete({ position : { my : 'left center', at : 'right center' } });
四.autocomplete()方法的事件
除了属性设置外, autocomplete()方法也提供了大量的事件。 这些事件可以给各种不同状态时提供回调函数。这些回调函数中的 this 值等于对话框内容的 div 对象,不是整个对话框的 div。
$('#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(''); }, });
//关闭自动补全 $('#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()方法处理的事件方法。
$('#reg').on('autocompleteopen', function () { alert('打开时触发!'); });
相关推荐
替换至 STM32CubeIDE_1.10.0或者eclipse CDT的/plugins/目录下,替换前备份原来的文件。 版本号可能会不同,可以试试,基本都能用
1.该js支持jquery的自动补全功能 2.因为jquery-ui是jquery的插件,所以部分版本jquery可能不支持该插件,建议换成内附的jquery.js 3.如有疑惑,请阅读内附的说明文档
eclipse中java、javascript、html代码自动补全
视频:...实现使用C和C++自动补全,CDT 版本10.2。目前可以用于stm32cubeide和CCS(Code Composer studio)使用。直接拷贝到CCS安装路径下:C:\ti\ccs\eclipse\plugins\
前端项目-ui-router-extras,UI路由器附加功能:粘性状态、未来状态、深层状态重定向、过渡承诺
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
前端项目-angular-ui-sortable,此指令允许您对jqueryui排序。
前端项目-angular-ui-calendar,arshaw完整日历的完整AngularJS指令。
前端项目-jquery-ui-multiselect-widget,多选程序将普通多选控件增强为优雅的复选框下拉列表,可与主题滚动器一起使用。
前端项目-angular-ui-tinymce,此指令允许您向表单元素添加tinymce。
前端项目-semantic-ui-calendar,Calendar module for Semantic UI
前端项目-swagger-ui,Swagger UI是一个HTML、JavaScript和CSS资产的无依赖性集合,可以从符合Swagger的API动态生成漂亮的文档。
C#基于WPF的前端登录UI框架-Win版源码。基于C#-WPF的前端登录UI框架,流畅的动画效果。C#基于WPF的前端登录UI框架-Win版源码。基于C#-WPF的前端登录UI框架,流畅的动画效果。C#基于WPF的前端登录UI框架-Win版源码。...
前端项目-angular-ui-mask,在输入字段上屏蔽,以便用户只能键入预先确定的模式
前端项目-angular-ui-router,基于状态的AngularJS路由
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
前端项目-angular-ui-codemirror,此指令允许您向textfarea元素添加codemirror。
•Android---UI篇---AutoCompleteTextView(自动提示) • •Android---UI篇---Toast(提示) • •Android---UI篇---Button(按钮) • •Android---UI篇---TextView(文本框) • •Android---UI篇---EditText...
前端项目-semantic-ui-react,官方语义用户界面反应集成。
前端项目-angular-ui-validate,NGModel的通用验证程序。