您的位置：首页 > Web前端

知问前端——邮箱自动补全

2016-05-02 22:31 441 查看
本节课，我们通过自动补全source属性的function回调函数，来动态的设置我们的数据源，以达到可以实现邮箱补全功能。

数据源function

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

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


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

邮箱自动补全

index.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知问前端</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="index.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
<div class="header_main">
<h1>知问</h1>
<div class="header_search">
<input type="text" name="search" class="search" />
</div>
<div class="header_button">
<!-- <input type="button" value="查询" id="search_button" /> -->
<button id="search_button">查询</button>
</div>
<div class="header_member">
<a href="###" id="reg_a">注册</a> | <a href="###" id="login_a">登录</a>
</div>
</div>
</div>

<div id="reg" title="会员注册">
<p>
<label for="user">账号：</label>
<input type="text" name="user" class="text" id="user" title="请输入账号，不少于2位！"></input>
<span class="star">*</span>
</p>
<p>
<label for="pass">密码：</label>
<input type="password" name="pass" class="text" id="pass" title="请输入密码，不少于6位！"></input>
<span class="star">*</span>
</p>
<p>
<label for="email">邮箱：</label>
<input type="text" name="email" class="text" id="email" title="请输入正确的邮箱！"></input>
<span class="star">*</span>
</p>
<p>
<label>性别：</label>
<input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">男</label></input>
<input type="radio" name="sex" id="female" value="female"><label for="female">女</label></input>
</p>
<p>
<label for="date">生日：</label>
<input type="text" name="date" readonly="readonly" class="text" id="date"></input>
</p>
</div>
</body>
</html>


style.css：

body {
margin: 40px 0 0 0;
padding: 0;
font-size: 12px;
font-family: 宋体;
background: #fff;
}
/* 更改jQuery UI主题的对话框header的背景 */
.ui-widget-header {
background: url(img/ui_header_bg.png);
}
/* 按钮正常状态的背景 */
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
background:url(img/ui_header_bg.png);
}
/* 按钮点击状态的背景 */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background:url(img/ui_white.png);
}
/* 工具提示的文本颜色 */
.ui-tooltip {
color: #666;
}
/* 邮箱自动补全的悬停背景色 */
.ui-menu .ui-state-focus {
background:url(img/ui_header_bg.png);
}
.ui-menu {
color: #666;
}
#header {
width: 100%;
height: 40px;
background: url(img/header_bg.png);
position: absolute;
top:0;
}
#header .header_main {
width: 800px;
height: 40px;
margin: 0 auto;
}
#header .header_main h1 {
font-size: 20px;
margin: 0;
padding: 0;
color: #666;
line-height: 40px;
float: left;
padding: 0 10px;
}
#header .header_search {
padding: 6px 0 0 0;
float: left;
}
#header .header_search .search {
width: 300px;
height: 24px;
border: 1px solid #ccc;
background: #fff;
color: #666;
font-size: 14px;
text-indent: 5px;
}
#header .header_button {
padding: 5px;
float: left;
}
#header .header_member {
float: right;
line-height: 40px;
color: #555;
font-size: 14px;
}
#header .header_member a {
text-decoration: none;
font-size: 14px;
color: #555;
}
#reg {
padding: 15px 0 0 15px;
}
#reg p {
margin: 10px 0;
padding: 0;
}
#reg p label {
font-size: 14px;
color: #666;
}
#reg .star {
font-size: 14px;
color: red;
}
#reg .text {
border-radius: 4px;
border: 1px solid #ccc;
background: #fff;
width: 200px;
height: 25px;
line-height: 25px;
text-indent: 5px;
font-size: 13px;
color: #666;
}


jQuery代码如下：

$(function() {

$("#email").autocomplete({
delay:0,
autoFocus:true,
source:function(request,response) {
var hosts = ['qq.com','163.com','126.com','sina.com.cn','gmail.com','hotmail.com'],
term = request.term, //获取用户输入的内容
name = term, //邮箱的用户名，如i_beautiful
host = '', //邮箱的域名，如sina.com.cn
ix = term.indexOf('@'), //@的位置
result = []; //最终呈现的邮箱列表
result.push(term);
//当有@时，重新分配用户名和域名
if(ix > -1) {
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if(name) {
//如果用户已经输入@和后面的域名
//那么就找到相关的域名提示，比如输入liayun@q，就提示liayun@qq.com
//如果用户还没有输入@和后面的域名，
//那么就把所有的域名都提示出来
if(host) {
findedHosts = $.grep(hosts, function(value, index) {
return value.indexOf(host) > -1;
});
} else {
findedHosts = hosts;
}

var findedResult = $.map(findedHosts, function(value, index) {
return name + "@" + value;
});

result = result.concat(findedResult);
}

response(result);
}
});

});


以上代码经过优化后：

$(function() {

$("#email").autocomplete({
delay:0,
autoFocus:true,
source:function(request,response) {
var hosts = ['qq.com','163.com','126.com','sina.com.cn','gmail.com','hotmail.com'],
term = request.term, //获取用户输入的内容
name = term, //邮箱的用户名，如i_beautiful
host = '', //邮箱的域名，如sina.com.cn
ix = term.indexOf('@'), //@的位置
result = []; //最终呈现的邮箱列表
result.push(term);
//当有@时，重新分配用户名和域名
if(ix > -1) {
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if(name) {
//如果用户已经输入@和后面的域名
//那么就找到相关的域名提示，比如输入liayun@q，就提示liayun@qq.com
//如果用户还没有输入@和后面的域名，
//那么就把所有的域名都提示出来
var findedHosts = (host ? $.grep(hosts, function(value, index) {
return value.indexOf(host) > -1; }) : hosts),
findedResult = $.map(findedHosts, function(value, index) {
return name + "@" + value;
});

result = result.concat(findedResult);
}

response(result);
}
});

});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航