<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>登录</title>
<style type="text/css">
.input-content {
width: 200px;
}
.input {
width: inherit;
padding: 0;
height: 30px;
line-height: 30px;
border: 1px solid #BBBBBB;
}
.layer {
margin-top: 2px;
width: 200px;
border: 1px solid #BBBBBB;
}
.layer-list {
margin: 0;
padding: 0;
}
.layer-list li {
margin: 0;
padding: 5px;
list-style-type: none;
}
.hide {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="input-content">
<input class="input" type="text" placeholder="输入账号" id="account" />
</div>
<div class="layer hide">
<ul class="layer-list">
<li class="layer-list-item" data-action="sina.com">sina.com</li>
</ul>
</div>
<script type="text/javascript">
/**
* autoCompleteTextview
* 类似新浪微博登录
* 输入账号时出现@后关联出邮箱后缀信息
*/
var RE_ECHO = new RegExp(\'@\');
var RE_ECHO_VAL = new RegExp(\'.*@\');
var CLASS_SHOW = \'show\';
var CLASS_HIDE = \'hide\';
// 邮箱的后缀
var emailList = [
\'sina.com\', \'163.com\', \'qq.com\', \'126.com\', \'vip.sina.com\',
\'sina.cn\', \'hotmail.com\', \'gmail.com\', \'sohu.com\', \'139.com\',
\'wo.com\', \'189.com\', \'21cn.com\'
];
// 过滤账号的值
var getSuffixList = function(value) {
var filter = value.split(\'@\')[1];
if(filter) {
var arr = [];
for(var i = 0, len = emailList.length; i < len; i++) {
var item = emailList[i];
if(item.indexOf(filter) === 0) {
arr.push(item);
}
}
return arr;
}
return emailList;
};
// 邮箱后缀
var createEmail = function(value) {
var itemTpl = \'<li class="layer-list-item">{{value}}{{action}}</li>\';
var ITEM_ACTION = \'{{action}}\';
var ITEM_VALUE = \'{{value}}\';
var listHtml = \'\';
var suffixList = getSuffixList(value);
if(suffixList.length) {
for(var i = 0, len = suffixList.length; i < len; i++) {
listHtml += itemTpl.replace(ITEM_ACTION, suffixList[i]).replace(ITEM_VALUE, value.match(RE_ECHO_VAL)[0]);
}
}
return listHtml;
};
var layerEL = document.querySelector(\'.layer\');
var listEl = layerEL.querySelector(\'.layer-list\');
var inputEL = document.getElementById(\'account\');
var inputChange = function(e) {
var value = e.target.value;
if(RE_ECHO.test(value)) {
var html = createEmail(value);
if(html) {
listEl.innerHTML = createEmail(value);
showLayer();
} else {
hideLayer();
}
}
};
var showLayer = function() {
var className = layerEL.className;
if(~className.indexOf(CLASS_HIDE)) {
className = className.replace(CLASS_HIDE, CLASS_SHOW);
layerEL.className = className;
}
};
var hideLayer = function() {
var className = layerEL.className;
if(~className.indexOf(CLASS_SHOW)) {
className = className.replace(CLASS_SHOW, CLASS_HIDE);
layerEL.className = className;
}
};
// 输入
inputEL.addEventListener(\'input\', inputChange);
// 获取焦点，显示；
inputEL.addEventListener(\'focus\', inputChange);
// 点击其它区域，隐藏列表区域；
document.addEventListener(\'click\', function(e) {
var target = e.target;
if(target !== inputEL && target.tagName !== \'DIV\' && !~target.className.indexOf(\'layer\')) {
hideLayer();
}
}, false);
// 选择
layerEL.addEventListener(\'click\', function(e) {
var target = e.target;
if(target.tagName === \'LI\') {
var text = target.innerText;
inputEL.value = text;
hideLayer();
}
}, false);
</script>
</body>
</html>
