本节课，我们通过自动补全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); } }); });