Ebenso benötigt dieses Plug-in keine HTML-Tags. Es benötigt lediglich ein Eingabefeld mit einem entsprechenden Klassennamen und das übergeordnete Element hat einen Klassennamen. Der interne HTML-Code wird automatisch generiert.
Der HTML-Code lautet wie folgt:
Kopieren Sie den Codecode wie folgt:
<div>
<Eingabetyp="text">
</div>
Tatsächlich sind die oben genannten div-Tags nicht erforderlich. Sie müssen lediglich eine Klasse wie oben im Eingabefeld und im übergeordneten Element hinzufügen (Sie können sie auch anpassen, indem Sie die Klasse einfach während der JS-Initialisierung übergeben. Standardmäßig ist die übergeordnete Klasse heißt „parentCls“, die aktuelle Eingabefeldklasse heißt „inputElem“ und die ausgeblendete Feldklasse heißt „hiddenCls“. Sie können ein leeres Objekt während der Initialisierung direkt initialisieren und übergeben. Da auf der Seite möglicherweise mehrere Eingabefelder vorhanden sind, ist eine übergeordnete Klasse erforderlich, um zu unterscheiden, um welches Eingabefeld es sich handelt. Natürlich ist ein verstecktes Feld erforderlich, um den Wert für das Entwicklungs-Backend zu speichern.
Es gibt einen Mailbox-Array-Parameter mailArr im Konfigurationselement: ["@qq.com", "@qq2.com", "@gmail.com", "@126.com", "@163.com", "@ hotmail.com“, „@yahoo.com“, „@yahoo.com.cn“, „@live.com“, „@sohu.com“, „@sina.com“]. Es soll uns sagen, dass es so viele Standardpostfächer gibt, dass es beim Initialisieren des Dropdown-Felds so viele Postfachaufforderungen gibt Wählen Sie im Dropdown-Feld ein Element aus. Aufgrund von Bedarfsänderungen kann dieser Parameter des Postfachs natürlich bei der Initialisierung entsprechend den Anforderungen konfiguriert werden.
Der Codierungsstil ist immer noch derselbe wie zuvor.
Die implementierten Funktionen sind wie folgt:
1. Unterstützt Tastaturbewegungen nach oben und unten, Mausklick und Eingabevorgang.
2. Beim Klicken auf das Dokument wird das Dropdown-Feld bis auf das aktuelle Eingabefeld ausgeblendet. Bei der Eingabe werden automatischer Abgleich und andere Vorgänge implementiert.
Ich werde nicht auf Details eingehen, aber es ähnelt der automatischen E-Mail-Eingabeaufforderung bei der Online-Registrierung. Wenn Sie Fehler haben, können Sie mir eine Nachricht hinterlassen. Es ist schon spät, also seien Sie nicht wortreich. Fügen Sie den Code direkt ein:
Der CSS-Code lautet wie folgt:
Kopieren Sie den Codecode wie folgt:
<Stil>
*{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>
Der JS-Code lautet wie folgt:
Kopieren Sie den Codecode wie folgt:
/**
* Plug-in für automatische E-Mail-Eingabeaufforderung
* @constructor EmailAutoComplete
* @ Optionen {Objekt} konfigurierbare Elemente
*/
Funktion EmailAutoComplete(Optionen) {
this.config = {
targetCls: '.inputElem', // Zieleingabeelement
parentCls: '.parentCls', //Die übergeordnete Klasse des aktuellen Eingabeelements
verstecktCls: '.hiddenCls', // aktuelles Eingabefeld
searchForm: '.jqtransformdone', //form form
hoverBg: 'hoverBg', // Der Hintergrund, den die Maus nach oben bewegt
inputValColor: 'red', //Farbe der Eingabeaufforderung im Eingabefeld
mailArr: [„@qq.com“, „@qq2.com“, „@gmail.com“, „@126.com“, „@163.com“, „@hotmail.com“, „@yahoo.com“. ","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"], //E-Mail-Array
isSelectHide: true, // Ob das Dropdown-Feld ausgeblendet werden soll, wenn darauf geklickt wird, ist standardmäßig true.
Rückruf: null //Klicken Sie auf eine Rückruffunktion für ein Element
};
this.cache = {
onlyFlag: true, // Nur einmal rendern
aktueller Index: -1,
oldIndex: -1
};
this.init(optionen);
}
EmailAutoComplete.prototype = {
Konstruktor: EmailAutoComplete,
init: Funktion(Optionen){
this.config = $.extend(this.config,options || {});
var self = dies,
_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'});
//Wenn der Eingabefeldwert leer ist, wird das Dropdown-Feld ausgeblendet
if(targetVal == '') {
$(item).attr({'data-html':''});
// Dem ausgeblendeten Feld einen Wert zuweisen
$(_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);
}anders {
$(item).attr({'data-html':targetVal});
// Dem ausgeblendeten Feld einen Wert zuweisen
$(_config.hiddenCls,parentNode).val(targetVal);
$(".auto-tip",parentNode) && $(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).removeClass('hidden');
// Den Inhalt der Dropdown-Box rendern
self._renderHTML({keycode:keycode,e:e,target:target,targetVal:targetVal,height:elemHeight,width:elemWidth,parentNode:parentNode});
}
});
});
// Verhindern, dass das Formular standardmäßig gesendet wird, Eingabetaste
$(_config.searchForm).each(function(index,item) {
$(item).keydown(function(e){
var keyCode = e.keyCode;
if(keyCode == 13) {
return false;
}
});
});
// Das Dropdown-Feld wird ausgeblendet, wenn auf das Dokument geklickt wird.
$(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');
});
}
});
},
/*
* Rendern Sie den Inhalt des Dropdown-Felds
* @param cfg{object}
*/
_renderHTML: function(cfg) {
var self = dies,
_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){
// Auf- und Abwärtsoperationen der Tastatur
self._keyUpAndDown(cfg.targetVal,cfg.e,cfg.parentNode);
}anders {
if(/@/.test(cfg.targetVal)) {
curVal = cfg.targetVal.replace(/@.*/,'');
}anders {
curVal = cfg.targetVal;
}
if(_cache.onlyFlag) {
$(cfg.parentNode).append('<input type="hidden"/>');
var wrap = '<ul>';
for(var i = 0; i < _config.mailArr.length; i++) {
wrap += '<li>'+'<span></span><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});
}
//Attribut data-html zu allen li hinzufügen
$('.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});
});
//Inhalt genau übereinstimmend
self._accurateMate({target:cfg.target,parentNode:cfg.parentNode});
//Wenn die Maus über ein Element bewegt wird li
self._itemHover(cfg.parentNode);
//Wenn auf das entsprechende Element geklickt wird
self._executeClick(cfg.parentNode);
}
},
/**
* Passt genau zu etwas
*/
_accurateMate: function(cfg) {
var self = dies,
_config = self.config,
_cache = self.cache;
var curVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html')),
newArrs = [];
if(/@/.test(curVal)) {
// Den Wert vor und nach @ abrufen
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>'+'<span></span><em data-html="'+newArrs[j]+'">'+newArrs[j]+'</em></li> ';
}
$('.auto-tip',cfg.parentNode).html(html);
//Attribut data-html zu allen li hinzufügen
$('.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});
});
// Wenn ein Element genau übereinstimmt, setzen Sie den aktuellen Index auf den Anfangswert
_cache.currentIndex = -1;
_cache.oldIndex = -1;
$('.auto-tip .output-num',cfg.parentNode).html(prefix);
//Wenn die Maus über ein Element bewegt wird li
self._itemHover(cfg.parentNode);
//Wenn auf das entsprechende Element geklickt wird
self._executeClick(cfg.parentNode);
}anders {
$(".auto-tip",cfg.parentNode) && !$(".auto-tip",cfg.parentNode).hasClass('hidden') &&
$(".auto-tip",cfg.parentNode).addClass('hidden');
$('.auto-tip',cfg.parentNode).html('');
}
}
},
/*
* Wenn die Maus über ein Element bewegt wird, li
*/
_itemHover: function(parentNode) {
var self = dies,
_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);
});
},
/*
* Wenn der Eingabefeldwert leer ist, werden alle li-Elemente mit der Klasse hoverBg gelöscht
*/
_removeBg: function(parentNode){
var self = dies,
_config = self.config;
$(".auto-tip li",parentNode).each(function(index,item){
$(item).hasClass(_config.hoverBg) && $(item).removeClass(_config.hoverBg);
});
},
/**
* Auf- und Ab-Tastenbedienung der Tastatur
*/
_keyUpAndDown: function(targetVal,e,parentNode) {
var self = dies,
_cache = self.cache,
_config = self.config;
// Wenn nach erfolgreicher Anforderung Daten zurückgegeben werden (beurteilt anhand der Länge des Elements), führen Sie die folgenden Vorgänge aus
if($('.auto-tip' + ' li',parentNode) && $('.auto-tip' + ' li').length > 0) {
var plen = $('.auto-tip' + ' li',parentNode).length,
keyCode = e.keyCode;
_cache.oldIndex = _cache.currentIndex;
// Vorgang nach oben verschieben
if(keyCode == 38) {
if(_cache.currentIndex == -1) {
_cache.currentIndex = plen - 1;
}anders {
_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);
// Dem ausgeblendeten Feld einen Wert zuweisen
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 40) { //Operation nach unten verschieben
if(_cache.currentIndex == plen - 1) {
_cache.currentIndex = 0;
}anders {
_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);
// Dem ausgeblendeten Feld einen Wert zuweisen
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 13) { //Operation eingeben
var curVal = $('.auto-tip' + ' .p-index'+_cache.oldIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curVal);
// Dem ausgeblendeten Feld einen Wert zuweisen
$(_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: Funktion(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]) {
gib i zurück;
}
}
return -1;
},
/**
* Wenn die Daten identisch sind, werden die Daten zurückgegeben, wenn auf das entsprechende Element geklickt wird
*/
_executeClick: function(parentNode) {
var _self = dies,
_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');
}
// Dem ausgeblendeten Feld einen Wert zuweisen
$(_config.hiddenCls,parentNode).val(dataAttr);
_config.callback && $.isFunction(_config.callback) && _config.callback();
});
}
};
// Initialisierung
$(Funktion() {
new EmailAutoComplete({});
});