<!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>
