jQueryUI,自动补全,jQuery自动补全（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/xxx.png); } 三．autocomplete()方法的属性
自动补全方法有两种形式：1.autocomplete(options)，options 是以对象键值对
的形式传参，每个键值对表示一个选项；2.autocomplete('action', param)，action
是操作对话框方法的字符串，param 则是options 的某个选项。
autocomplete 外观选项 属性
| 默认值/类型
| 说明
| disabled
| false/布尔值
| 设置为true，将禁止显示自动补全。
| source
| 无/数组
| 指定数据源，可以是本地的，也可以是远程的。
| minLength
| 1/数值
| 默认为1，触发补全列表最少输入字符数。
| delay
| 300/数值
| 默认为300 毫秒，延迟显示设置。
| autoFocus
| false/布尔值
| 设置为true 时，第一个项目会自动被选定。 |
$('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], disabled : false, minLength : 2, delay : 50, autoFocus : true, }); autocomplete 页面位置选项 属性
| 默认值/类型
| 说明
| position
| 无/对象
| 使用对象的键值对赋值，有两个属性：my 和at 表示坐标。my 是以目标点左上角为基准，at 以 目标点右下角为基准。 |
$('#email').autocomplete({ position : { my : 'left center', at : 'right center' } }); 四．autocomplete()方法的事件
除了属性设置外，autocomplete()方法也提供了大量的事件。这些事件可以给各
种不同状态时提供回调函数。这些回调函数中的this 值等于对话框内容的div 对象，不
是整个对话框的div。
autocomplete 事件选项
autocomplete 事件选项 事件名
| 说明
| create
| 当自动补全被创建时会调用create 方法，该方法有两个 参数(event, ui)。此事件中的ui 参数为空。 | open
| 当自动补全被显示时，会调用open 方法，该方法有两个 参数(event, ui)。此事件中的ui 参数为空。 | close
| 当自动补全被关闭时，会调用close 方法，该方法有两个 参数(event, ui)。此事件中的ui 参数为空。 | focus
| 当自动补全获取焦点时，会调用focus 方法，该方法有两 个参数(event, ui)。此事件中的ui 有一个子属性对象item， 分别有两个属性：label，补全列表显示的文本；value， 将要输入框的值。一般label 和value 值相同。 | select
| 当自动补全获被选定时，会调用select 方法，该方法有两 个参数(event, ui)。此事件中的ui 有一个子属性对象item， 分别有两个属性：label，补全列表显示的文本；value， 将要输入框的值。一般label 和value 值相同。 | change
| 当自动补全失去焦点且内容发生改变时，会调用change 方法，该方法有两个参数(event, ui)。此事件中的ui 参数 为空。 | search
| 当自动补全搜索完成后，会调用search 方法，该方法有 两个参数(event, ui)。此事件中的ui 参数为空。 | response
| 当自动补全搜索完成后，在菜单显示之前，会调用 response 方法，该方法有两个参数(event, ui)。此事件中 的ui 参数有一个子对象content，他会返回label 和value 值，可通过遍历了解。 |
$('#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(''); }, }); autocomplete('action', param)方法autocomplete('action', param)方法方法
| 返回值
| 说明
| autocomplete('close')
| jQuery 对象
| 关闭自动补齐
| autocomplete('disable')
| jQuery 对象
| 禁用自动补齐
| autocomplete('enable')
| jQuery 对象
| 启用自动补齐
| autocomplete('destroy')
| jQuery 对象
| 删除自动补齐，直接阻断
| autocomplete('widget')
| jQuery 对象
| 获取工具提示的jQuery 对象
| autocomplete('search',value)
| jQuery 对象
| 在数据源获取匹配的字符串
| autocomplete('option', param)
| 一般值
| 获取options 属性的值
| autocomplete('option', param,value)
| jQuery 对象
| 设置options 属性的值 | $('#reg').on('autocompleteopen', function () { alert('打开时触发！'); }); 五、邮箱自动补全
通过自动补全source 属性的function 回调函数，来动态的设置数据源，以达到可以
实现邮箱补全功能。 1．数据源function
自动补全UI 的source 不但可以是数组，也可以是function 回调函数。提供了自带的
两个参数设置动态的数据源。 $('#email').autocomplete({ source : function (request, response) { alert(request.term); //可以获取你输入的值 response(['aa', 'aaaa', 'aaaaaa', 'bb']); //展示补全结果 }, }); 注意：这里的response 不会根据你搜索关键字而过滤无关结果，而是把整个结果全部呈现出
来。因为source 数据源，本身就是动态改变的，就由自定义，从而放弃系统内置的搜索能力。 2．邮箱自动补全 $('#email').autocomplete({ autoFocus : true, delay : 0, source : function (request, response) { var hosts = ['qq.com','163.com', '263.com', 'gmail.com', 'hotmail.com'], //起始 term = request.term, //获取输入值 ix = term.indexOf('@'), //@ name = term, //用户名 host = '', //域名 result = []; //结果 //结果第一条是自己输入 result.push(term); if (ix > -1) { //如果有@的时候 name = term.slice(0, ix); //得到用户名 host = term.slice(ix + 1); //得到域名 } if (name) { //得到找到的域名 var findedHosts = (host ? $.grep(hosts, function (value, index) { return value.indexOf(host) > -1; }) : hosts), //最终列表的邮箱 findedResults = $.map(findedHosts, function (value, index) { return name + '@' + value; }); //增加一个自我输入 result = result.concat(findedResults); } response(result); }, });
jQueryUI,自动补全,jQuery
|
