近来做的项目，须要用到邮箱的自动补全，然则只是三个罕见的
所以就本身写了下，代码以下：
<!DOCTYPE html>
<html>
<head>
<title>自动补全</title>
<style type="text/css">
.text_input {
padding: 5px 8px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 22px;
}
.text_input:focus {
outline: none;
}
.hide {
display: none !important;
}
.drop_down_ul {
padding-left: 0;
}
.drop_down_ul li {
cursor: pointer;
list-style: none;
padding: 2px 0 2px 15px;
text-align: left;
}
.drop_down_ul li:hover,
.drop_down_ul li.active {
background-color: #3394ff;
color: #fff;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>输入邮箱</h1>
<div class="input_wraper">
<input class="text_input j_autocomplete">
</div>
<script charset="utf-8" src="http://libs.useso.com/js/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
function AutoComplete($, inputEle) {
var $targetEle = $(inputEle),
mailSuffix = ['qq.com', '163.com', '126.com'],
dropDownHtml = '<div class="hide" style="position: fixed; background-color: #fff; max-height: 200px;z-index: 9999;border: 1px solid #ccc;' +
'padding-bottom: 20px;" id="mailAutoComplete"><ul class="drop_down_ul"></ul></div>',
$bodyEle = $(window);
$('body').append(dropDownHtml)
$completeELe = $('#mailAutoComplete');
/**
* 设置下拉框的位置
*/
function setSearchResultPos() {
var offset = $targetEle.offset(),
windowScrollTop = $(window).scrollTop() || document.documentElement.clientTop,
windowScrollLeft = $(window).scrollLeft() || document.documentElement.clientLeft,
width = $targetEle[0].offsetWidth,
height = $targetEle[0].offsetHeight;
$completeELe.css({
top: (offset.top + height - windowScrollTop - 1) + 'px',
left: (offset.left - windowScrollLeft) + 'px',
width: (width - 2) + 'px'
});
}
/**
* 是不是展现下拉框
* @returns {boolean}
*/
function isShowComplete() {
var mailText = $targetEle.val();
return mailText.replace(/\s/g, '').length >= 1;
}
/**
* 猎取补全的下拉文本列表
*/
function getCompleteText() {
var mailSuffixConfig = mailSuffix,
mailText = $.trim($targetEle.val()),
mailPre = mailText.split('@')[0],
textList = [],
matchList = [];
$.each(mailSuffixConfig, function(index, suffix) {
textList.push(mailPre + '@' + suffix);
});
$.each(textList, function(i, text) {
if(text.indexOf(mailText) != -1) {
matchList.push(text);
}
});
if(matchList.length == 1 && matchList[0] == mailText) {
return [];
}
return matchList;
}
function hideSearchResult() {
$completeELe.addClass('hide');
}
function showSearchResult() {
var ul = '',
textList = getCompleteText();
if(textList.length) {
setSearchResultPos();
$.each(textList, function (i, text) {
ul += '<li>' + text + '</li>';
});
$completeELe.find('ul').html(ul);
$completeELe.removeClass('hide');
} else {
hideSearchResult();
}
}
function searchDown() {
var $activeLi = $completeELe.find('li.active'),
$firstLi = $completeELe.find('li:first-child');
if($activeLi.length) {
var $nextLi = $activeLi.next();
$activeLi.removeClass('active');
($nextLi.length) ? $nextLi.addClass('active') : $firstLi.addClass('active');
} else {
$firstLi.addClass('active');
}
}
function searchUp() {
var $activeLi = $completeELe.find('li.active'),
$lastLi = $completeELe.find('li:last-child');
if($activeLi.length) {
var $beforeLi = $activeLi.prev(); //猎取前一个元素
$activeLi.removeClass('active');
($beforeLi.length) ? $beforeLi.addClass('active') : $lastLi.addClass('active');
} else {
$lastLi.addClass('active');
}
}
//键盘↑↓按键监听
function dealKeyUpDown(e) {
if(!$completeELe.hasClass('hide')) { //下拉框可见
var k = e.charCode || e.keyCode; // 兼容 firefox charCode
if (k == 40) {
searchDown();
} else if (k == 38) {
searchUp();
} else if(k == 13) {
var $activeLi = $completeELe.find('li.active');
if($activeLi.length) {
$activeLi.click();
}
}
}
}
$targetEle.keyup(function(e) {
e.preventDefault();
var k = e.charCode || e.keyCode; // 兼容 firefox charCode
if (k == 40 || k == 38 || (k == 13)) {
dealKeyUpDown(e);//键盘↑↓按键监听
} else if (isShowComplete()) {
showSearchResult();
} else {
hideSearchResult();
}
return false;
});
//键盘↑↓按键监听
$completeELe.on('keyup', function(e) {
dealKeyUpDown(e) ;
});
$targetEle.click(function() {
isClickOnResult = false;
if(isShowComplete()) {
showSearchResult();
} else {
hideSearchResult();
}
return false;
});
var isClickOnResult = false,
isMouseOver = false;
$bodyEle.click(function() {
!isClickOnResult && hideSearchResult();
isClickOnResult = false;
});
$bodyEle.resize(function(){ setSearchResultPos(); });
$(window).scroll(function() { hideSearchResult(); });
$completeELe.click(function() {
isClickOnResult = true;
return false;
});
$completeELe.mouseover(function() {
isMouseOver = true;
});
$completeELe.mouseleave(function() {
isMouseOver = false;
});
$completeELe.delegate('li', 'click', function() {
$targetEle.val($(this).text());
isMouseOver = false;
$targetEle.blur(); //触发一下blur事宜 让提醒语消逝
isClickOnResult = true;
hideSearchResult();
return false;
});
}
AutoComplete(window.jQuery, '.j_autocomplete');
</script>
</body>
</html>