js輸入框郵箱自動提示功能代碼實現(xiàn)
同理 此插件不需要任何html標簽，只需要一個輸入框 有相對應(yīng)的class類名就ok 且父級有個class類名，其他的都不需要。內(nèi)部的HTML代碼都是自動生成的。
HTML代碼如下：
<div class="parentCls">
<input type="text" class="inputElem">
</div>
其實上面的div標簽都可以不需要 只需要在input輸入框 且父級元素添加一個如上class(自定義也可以，只是在JS初始化的時候要傳入class就ok 我默認情況下 父級class叫parentCls,當前輸入框class叫inputElem,隱藏域的class叫hiddenCls，在初始化的時候 直接初始化 傳入空對象即可！)。因為頁面上可能有多個輸入框 所以需要一個父級class 來區(qū)分是那個輸入框，當然要個隱藏域 存值給開發(fā)后臺。
其中在配置項里面 有個郵箱數(shù)組參數(shù) mailArr : ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"] 。就是要告訴我們默認郵箱有這么多，不管我輸入什么 下拉框初始化時候有這么多郵箱提示，當我精確到某一項的時候 在給個提示 精確到某一項下拉。當然由于需求的變更 郵箱這個參數(shù)可以自己初始化時候 自己根據(jù)需求配置。
代碼風格還是和以前一樣。
實現(xiàn)的功能如下：
1. 支持鍵盤上下移鍵盤操作，支持鼠標點擊及按回車操作。
2. 點擊document時候 除當前input輸入框之外 下拉框隱藏。當接著輸入時候 實現(xiàn)自動匹配等等操作。
具體不多說 就是類似于網(wǎng)上注冊時候 郵箱自動提示功能一樣 ，如果有任何bug的話 可以給我留言，時間也不早了 不羅嗦了！直接貼代碼：
CSS代碼如下：
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
.inputElem {width:198px;height:22px;line-height:22px;border:1px solid #ff4455;}
.parentCls{width:200px;}
.auto-tip li{width:100%;height:22px;line-height:22px;font-size:14px;}
.auto-tip li.hoverBg{background:#ddd;cursor:pointer;}
.red{color:red;}
.hidden {display:none;}
</style>
JS代碼如下：
/**
* 郵箱自動提示插件
* @constructor EmailAutoComplete
* @ options {object} 可配置項
*/
function EmailAutoComplete(options) {
this.config = {
targetCls : '.inputElem', // 目標input元素
parentCls : '.parentCls', // 當前input元素的父級類
hiddenCls : '.hiddenCls', // 當前input隱藏域
searchForm : '.jqtransformdone', //form表單
hoverBg : 'hoverBg', // 鼠標移上去的背景
inputValColor : 'red', // 輸入框輸入提示顏色
mailArr : ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"], //郵箱數(shù)組
isSelectHide : true, // 點擊下拉框 是否隱藏 默認為true
callback : null // 點擊某一項回調(diào)函數(shù)
};
this.cache = {
onlyFlag : true, // 只渲染一次
currentIndex : -1,
oldIndex : -1
};
this.init(options);
}
EmailAutoComplete.prototype = {
constructor: EmailAutoComplete,
init: function(options){
this.config = $.extend(this.config,options || {});
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).each(function(index,item){
$(item).keyup(function(e){
var target = e.target,
targetVal = $.trim($(this).val()),
keycode = e.keyCode,
elemHeight = $(this).outerHeight(),
elemWidth = $(this).outerWidth(),
parentNode = $(this).closest(_config.parentCls);
$(parentNode).css({'position':'relative'});
// 如果輸入框值為空的話 那么下拉框隱藏
if(targetVal == '') {
$(item).attr({'data-html':''});
// 給隱藏域賦值
$(_config.hiddenCls,parentNode).val('');
_cache.currentIndex = -1;
_cache.oldIndex = -1;
$(".auto-tip",parentNode) && !$(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).addClass('hidden');
self._removeBg(parentNode);
}else {
$(item).attr({'data-html':targetVal});
// 給隱藏域賦值
$(_config.hiddenCls,parentNode).val(targetVal);
$(".auto-tip",parentNode) && $(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).removeClass('hidden');
// 渲染下拉框內(nèi)容
self._renderHTML({keycode:keycode,e:e,target:target,targetVal:targetVal,height:elemHeight,width:elemWidth,parentNode:parentNode});
}
});
});
// 阻止form表單默認enter鍵提交
$(_config.searchForm).each(function(index,item) {
$(item).keydown(function(e){
var keyCode = e.keyCode;
if(keyCode == 13) {
return false;
}
});
});
// 點擊文檔document時候 下拉框隱藏掉
$(document).click(function(e){
e.stopPropagation();
var target = e.target,
tagCls = _config.targetCls.replace(/^\./,'');
if(!$(target).hasClass(tagCls)) {
$('.auto-tip') && $('.auto-tip').each(function(index,item){
!$(item).hasClass('hidden') && $(item).addClass('hidden');
});
}
});
},
/*
* 渲染下拉框提示內(nèi)容
* @param cfg{object}
*/
_renderHTML: function(cfg) {
var self = this,
_config = self.config,
_cache = self.cache,
curVal;
var curIndex = self._keyCode(cfg.keycode);
$('.auto-tip',cfg.parentNode).hasClass('hidden') && $('.auto-tip',cfg.parentNode).removeClass('hidden');
if(curIndex > -1){
// 鍵盤上下操作
self._keyUpAndDown(cfg.targetVal,cfg.e,cfg.parentNode);
}else {
if(/@/.test(cfg.targetVal)) {
curVal = cfg.targetVal.replace(/@.*/,'');
}else {
curVal = cfg.targetVal;
}
if(_cache.onlyFlag) {
$(cfg.parentNode).append('<input type="hidden" class="hiddenCls"/>');
var wrap = '<ul class="auto-tip">';
for(var i = 0; i < _config.mailArr.length; i++) {
wrap += '<li class="p-index'+i+'">'+'<span class="output-num"></span><em class="em" data-html="'+_config.mailArr[i]+'">'+_config.mailArr[i]+'</em></li>';
}
wrap += '</ul>';
_cache.onlyFlag = false;
$(cfg.parentNode).append(wrap);
$('.auto-tip',cfg.parentNode).css({'position':'absolute','top':cfg.height,'width':cfg.width - 2 + 'px','left':0,
'border':'1px solid #ccc','z-index':10000});
}
// 給所有l(wèi)i添加屬性 data-html
$('.auto-tip li',cfg.parentNode).each(function(index,item){
$('.output-num',item).html(curVal);
!$('.output-num',item).hasClass(_config.inputValColor) &&
$('.output-num',item).addClass(_config.inputValColor);
var emVal = $.trim($('.em',item).attr('data-html'));
$(item).attr({'data-html':curVal + '' +emVal});
});
// 精確匹配內(nèi)容
self._accurateMate({target:cfg.target,parentNode:cfg.parentNode});
// 鼠標移到某一項li上面時候
self._itemHover(cfg.parentNode);
// 點擊對應(yīng)的項時
self._executeClick(cfg.parentNode);
}
},
/**
* 精確匹配某項內(nèi)容
*/
_accurateMate: function(cfg) {
var self = this,
_config = self.config,
_cache = self.cache;
var curVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html')),
newArrs = [];
if(/@/.test(curVal)) {
// 獲得@ 前面 后面的值
var prefix = curVal.replace(/@.*/, ""),
suffix = curVal.replace(/.*@/, "");
$.map(_config.mailArr,function(n){
var reg = new RegExp(suffix);
if(reg.test(n)) {
newArrs.push(n);
}
});
if(newArrs.length > 0) {
$('.auto-tip',cfg.parentNode).html('');
$(".auto-tip",cfg.parentNode) && $(".auto-tip",cfg.parentNode).hasClass('hidden') &&
$(".auto-tip",cfg.parentNode).removeClass('hidden');
var html = '';
for(var j = 0, jlen = newArrs.length; j < jlen; j++) {
html += '<li class="p-index'+j+'">'+'<span class="output-num"></span><em class="em" data-html="'+newArrs[j]+'">'+newArrs[j]+'</em></li>';
}
$('.auto-tip',cfg.parentNode).html(html);
// 給所有l(wèi)i添加屬性 data-html
$('.auto-tip li',cfg.parentNode).each(function(index,item){
$('.output-num',item).html(prefix);
!$('.output-num',item).hasClass(_config.inputValColor) &&
$('.output-num',item).addClass(_config.inputValColor);
var emVal = $.trim($('.em',item).attr('data-html'));
$(item).attr('data-html','');
$(item).attr({'data-html':prefix + '' +emVal});
});
// 精確匹配到某項時候 讓當前的索引等于初始值
_cache.currentIndex = -1;
_cache.oldIndex = -1;
$('.auto-tip .output-num',cfg.parentNode).html(prefix);
// 鼠標移到某一項li上面時候
self._itemHover(cfg.parentNode);
// 點擊對應(yīng)的項時
self._executeClick(cfg.parentNode);
}else {
$(".auto-tip",cfg.parentNode) && !$(".auto-tip",cfg.parentNode).hasClass('hidden') &&
$(".auto-tip",cfg.parentNode).addClass('hidden');
$('.auto-tip',cfg.parentNode).html('');
}
}
},
/*
* 鼠標移到某一項li上時
*/
_itemHover: function(parentNode) {
var self = this,
_config = self.config,
_cache = self.cache;
$('.auto-tip li',parentNode).hover(function(index,item) {
!$(this).hasClass(_config.hoverBg) && $(this).addClass(_config.hoverBg);
},function() {
$(this).hasClass(_config.hoverBg) && $(this).removeClass(_config.hoverBg);
});
},
/*
* 當輸入框值為空時候 li項都刪掉class hoverBg
*/
_removeBg: function(parentNode){
var self = this,
_config = self.config;
$(".auto-tip li",parentNode).each(function(index,item){
$(item).hasClass(_config.hoverBg) && $(item).removeClass(_config.hoverBg);
});
},
/**
* 鍵盤上下鍵操作
*/
_keyUpAndDown: function(targetVal,e,parentNode) {
var self = this,
_cache = self.cache,
_config = self.config;
// 如果請求成功后 返回了數(shù)據(jù)(根據(jù)元素的長度來判斷) 執(zhí)行以下操作
if($('.auto-tip' + ' li',parentNode) && $('.auto-tip' + ' li').length > 0) {
var plen = $('.auto-tip' + ' li',parentNode).length,
keyCode = e.keyCode;
_cache.oldIndex = _cache.currentIndex;
// 上移操作
if(keyCode == 38) {
if(_cache.currentIndex == -1) {
_cache.currentIndex = plen - 1;
}else {
_cache.currentIndex = _cache.currentIndex - 1;
if(_cache.currentIndex < 0) {
_cache.currentIndex = plen - 1;
}
}
if(_cache.currentIndex !== -1) {
!$('.auto-tip .p-index'+_cache.currentIndex,parentNode).hasClass(_config.hoverBg) &&
$('.auto-tip .p-index'+_cache.currentIndex,parentNode).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);
var curAttr = $('.auto-tip' + ' .p-index'+_cache.currentIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curAttr);
// 給隱藏域賦值
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 40) { //下移操作
if(_cache.currentIndex == plen - 1) {
_cache.currentIndex = 0;
}else {
_cache.currentIndex++;
if(_cache.currentIndex > plen - 1) {
_cache.currentIndex = 0;
}
}
if(_cache.currentIndex !== -1) {
!$('.auto-tip .p-index'+_cache.currentIndex,parentNode).hasClass(_config.hoverBg) &&
$('.auto-tip .p-index'+_cache.currentIndex,parentNode).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);
var curAttr = $('.auto-tip' + ' .p-index'+_cache.currentIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curAttr);
// 給隱藏域賦值
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 13) { //回車操作
var curVal = $('.auto-tip' + ' .p-index'+_cache.oldIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curVal);
// 給隱藏域賦值
$(_config.hiddenCls,parentNode).val(curVal);
if(_config.isSelectHide) {
!$(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).addClass('hidden');
}
_config.callback && $.isFunction(_config.callback) && _config.callback();
_cache.currentIndex = -1;
_cache.oldIndex = -1;
}
}
},
_keyCode: function(code) {
var arrs = ['17','18','38','40','37','39','33','34','35','46','36','13','45','44','145','19','20','9'];
for(var i = 0, ilen = arrs.length; i < ilen; i++) {
if(code == arrs[i]) {
return i;
}
}
return -1;
},
/**
* 當數(shù)據(jù)相同的時 點擊對應(yīng)的項時 返回數(shù)據(jù)
*/
_executeClick: function(parentNode) {
var _self = this,
_config = _self.config;
$('.auto-tip' + ' li',parentNode).unbind('click');
$('.auto-tip' + ' li',parentNode).bind('click',function(e){
var dataAttr = $(this).attr('data-html');
$(_config.targetCls,parentNode).val(dataAttr);
if(_config.isSelectHide) {
!$(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).addClass('hidden');
}
// 給隱藏域賦值
$(_config.hiddenCls,parentNode).val(dataAttr);
_config.callback && $.isFunction(_config.callback) && _config.callback();
});
}
};
// 初始化
$(function() {
new EmailAutoComplete({});
});
相關(guān)文章
js函數(shù)使用技巧之 setTimeout(function(){},0)
setTimeout的作用是將函數(shù)推遲第二參數(shù)設(shè)定的毫秒數(shù)后再執(zhí)行，如果是0，就意味著瀏覽器要馬上執(zhí)行該函數(shù)，但是瀏覽器解析到setTimeout，雖然會"立刻"執(zhí)行2009-02-02
JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法的相關(guān)資料,layer是layui的一個彈出層組件,但是可以作為獨立組件使用,需要的朋友可以參考下2023-10-10
最近由于公司需要研究了一下微信小程序的開發(fā),特此記錄一下小程序獲取授權(quán)的流程,便于自己理解,下面這篇文章主要給大家介紹了關(guān)于如何通過大白話理解微信小程序獲取授權(quán)的相關(guān)資料,需要的朋友可以參考下2022-12-12
連連看最難的部分應(yīng)該是路徑搜索，即鼠標點的兩點之間看有無可通的路徑。 看過有人寫的遞歸寫法，心里癢癢，就捉摸了一下，發(fā)現(xiàn)不用遞歸的情況下難度也不大2013-12-12
本文主要介紹了js字符串與Unicode編碼互相轉(zhuǎn)換的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
使用webpack搭建pixi.js開發(fā)環(huán)境
這篇文章主要介紹了使用webpack搭建pixi.js開發(fā)環(huán)境，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
JavaScript封裝Vue-Router實現(xiàn)流程詳解
這篇文章主要介紹了JavaScript封裝Vue-Router實現(xiàn)流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-09-09
JavaScript必看的10道面試題總結(jié)（推薦）
JavaScript 已經(jīng)成為全棧開發(fā)技能的基石，在全棧開發(fā)面試中都會不可避免地涉及到與 JavaScript 有關(guān)的問題。這篇文章主要給大家介紹了關(guān)于JavaScript必看的10道面試題,需要的朋友可以參考下2021-05-05
這篇文章主要為大家介紹了輪播圖組件JavaScript代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了利用JavaScript實現(xiàn)放煙花特效和用字符“$”繪制“福”字，文中的示例代碼簡潔易懂，感興趣的小伙伴可以學習一下2022-01-01