您的位置：首页 > Web前端 > JQuery

第一百八十一节，jQuery-UI，知问前端--自动补全 UI--邮箱自动补全

2017-03-13 21:09 423 查看

jQuery-UI，知问前端--自动补全 UI--[b]邮箱自动补全[/b]

学习要点：

　　1.调用 autocomplete()方法

　　2.修改 autocomplete()样式

　　3.autocomplete()方法的属性

　　4.autocomplete()方法的事件

　　5.autocomplete 中使用 on()

自动补全（autocomplete），是一个可以减少用户输入完整信息的 UI 工具。一般在输入邮箱、搜索关键字等，然后提取出相应完整字符串供用户选择。

一．调用 autocomplete()方法

[b]autocomplete()方法，输入框搜索数据源自动补全方法，有一个必填属性，参数是接收一个对象[/b]

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq
});

二．修改 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 的某个选项。

autocomplete 外观选项

disabled false/布尔值设置为 true，将禁止显示自动补全。

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq,
disabled : true       //disabled false/布尔值 设置为 true，将禁止显示自动补全。
});

source 无/数组指定数据源，可以是本地的，也可以是远程的。，可以是各种数据类型

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq,
disabled : true       //disabled false/布尔值 设置为 true，将禁止显示自动补全。
});

minLength 1/数值默认为 1，触发补全列表最少输入字符数。

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq,
minLength : 2       //minLength 1/数值 默认为 1，触发补全列表最少输入字符数。
});

delay 300/数值默认为 300 毫秒，延迟显示设置。

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq,
delay : 0       //delay 300/数值 默认为 300 毫秒，延迟显示设置。
});

autoFocus false/布尔值设置为 true 时，第一个项目会自动被选定。

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq,
autoFocus : true       //autoFocus false/布尔值 设置为 true 时，第一个项目会自动被选定。
});

autocomplete 页面位置选项

position 无/对象使用对象的键值对赋值，有两个属性：my 和 at表示坐标。my 是以目标点左上角为基准，at 以目标点右下角为基准。

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq,
position : {
// my : 'left top'  //设置提示框相当对于元素出现的横坐标，设置提示框相当对于元素出现的竖坐标
my : 'left center',
at : 'right+5 center'
}
});

四．autocomplete()方法的事件

除了属性设置外，autocomplete()方法也提供了大量的事件。这些事件可以给各种不同状态时提供回调函数。这些回调函数中的 this 值等于对话框内容的 div 对象，不是整个对话框的 div。

autocomplete 事件选项

create当自动补全被创建时会调用 create 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq,
create : function () {      //create当自动补全被创建时会调用 create 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。
alert('创建时');
}
});

open当自动补全被显示时，会调用 open 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

close 当自动补全被关闭时，会调用 close 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

focus当自动补全获取焦点时，会调用 focus 方法，该方法有两个参数(event, ui)。此事件中的 ui 有一个子属性对象 item，分别有两个属性：label，补全列表显示的文本；value，将要输入框的值。一般 label 和 value 值相同。

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq,
focus : function (event, ui) {
alert(ui.item.value);
}
});

select 当自动补全获被选定时，会调用 select 方法，该方法有两个参数(event, ui)。此事件中的 ui 有一个子属性对象 item，分别有两个属性：label，补全列表显示的文本；value，将要输入框的值。一般 label 和 value 值相同。

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq,
select : function (event, ui) {
alert(ui.item.value);
}
});

change当自动补全失去焦点且内容发生改变时，会调用 change方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

search 当自动补全搜索完成后，会调用 search 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数为空。

response当自动补全搜索完成后，在菜单显示之前，会调用response 方法，该方法有两个参数(event, ui)。此事件中的 ui 参数有一个子对象 content[数组]，他会返回 label 和 value值，可通过遍历了解。

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq,
response : function (event, ui) {
alert(ui.content[0].value);
}
});

注意：其他事件选项使用相同

autocomplete('action', param)方法

autocomplete('close') jQuery 对象关闭自动补齐

autocomplete('disable') jQuery 对象禁用自动补齐

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq
});
$('#reg #email').autocomplete('disable');  //禁用自动补齐

autocomplete('enable') jQuery 对象启用自动补齐

autocomplete('destroy') jQuery 对象删除自动补齐，直接阻断。

autocomplete('widget') jQuery 对象获取工具提示的 jQuery 对象

autocomplete('search',value) jQuery 对象在数据源获取匹配的字符串。[b]value值会代替输入框输入字符补全[/b]

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq
});
$('#reg #email').autocomplete('search','a');  //value值会代替输入框输入字符补全,不输入内容也会按照a补全

autocomplete('option', param) 一般值获取 options 属性的值，获取方法属性，第二个参数要获取的属性名称

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq
});
alert($('#reg #email').autocomplete('option', 'source'));

autocomplete('option', param,value)jQuery 对象设置 options 属性的值，设置属性值，第二个参数是要设置的属性名称，第三个参数是要设置的属性值

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq
});
alert($('#reg #email').autocomplete('option', 'source','aaaaa'));

注意：其他使用相同

五．autocomplete 中使用 on()

在 autocomplete 的事件中，提供了使用 on()方法处理的事件方法。

on()方法触发的自动补全事件

autocompleteopen 显示时触发

var buq = ['aaa@163.com', 'bbb@163.com', 'ccc@163.com']; //自动补全数据源
$('#reg #email').autocomplete({        //将邮箱执行自动补全方法
source : buq
});
$('#reg #email').on('autocompleteopen',function () {
alert('显示时触发');
});

autocompleteclose 关闭时触发

autocompletesearch 查找时触发

autocompletefocus 获得焦点时触发

autocompleteselect 选定时触发

autocompletechange 改变时触发

autocompleteresponse 搜索完毕后，显示之前

邮箱自动补全

学习要点：

　　1.数据源 function

　　2.邮箱自动补全

本节课，我们通过自动补全 source 属性的 function 回调函数，来动态的设置我们的数据源，以达到可以实现邮箱补全功能。

一．数据源 function

自动补全 UI 的 source 不但可以是数组，也可以是 function 回调函数。提供了自带的两个参数设置动态的数据源。

数据源回调函数参数request, response

$('#email').autocomplete({
source: function (request, response) {
alert(request.term); //可以获取你输入的值
response(['aa', 'aaaa', 'aaaaaa', 'bb']); //展示补全结果
}
});

注意：这里的 response 不会根据你搜索关键字而过滤无关结果，而是把整个结果全部呈现出来。因为 source 数据源，本身就是给你动态改变的，就由你自定义，从而放弃系统内置的搜索能力。

二．邮箱自动补全

$('#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);
}
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航