De la même manière, ce plug-in ne nécessite aucune balise HTML. Il n'a besoin que d'une zone de saisie avec un nom de classe correspondant et le parent a un nom de classe. Rien d'autre n'est nécessaire. Le code HTML interne est généré automatiquement.
Le code HTML est le suivant :
Copiez le code comme suit :
<div>
<type d'entrée="texte">
</div>
En fait, les balises div ci-dessus ne sont pas obligatoires. Il vous suffit d'ajouter une classe comme ci-dessus dans la zone de saisie et l'élément parent (vous pouvez également la personnaliser, il suffit de la transmettre dans la classe lors de l'initialisation JS. Par défaut, la classe parent. s'appelle parentCls. , la classe de zone de saisie actuelle s'appelle inputElem et la classe de champ caché s'appelle HiddenCls. Vous pouvez directement initialiser et transmettre un objet vide lors de l'initialisation !). Étant donné qu'il peut y avoir plusieurs zones de saisie sur la page, une classe parent est nécessaire pour distinguer de quelle zone de saisie il s'agit. Bien entendu, un champ masqué est requis pour stocker la valeur pour le backend de développement.
Il existe un paramètre de tableau de boîte aux lettres mailArr dans l'élément de configuration : ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@ hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"]. Cela nous dit qu'il y a tellement de boîtes aux lettres par défaut. Peu importe ce que j'entre, il y a tellement d'invites de boîtes aux lettres lorsque la liste déroulante est initialisée. Lorsque j'identifie un certain élément, je donne une invite pour identifier un certain élément. élément dans la liste déroulante. Bien entendu, en raison de l'évolution de la demande, ce paramètre de la boîte aux lettres peut être configuré en fonction de la demande lors de l'initialisation.
Le style de codage est toujours le même qu’auparavant.
Les fonctions mises en œuvre sont les suivantes :
1. Prend en charge le mouvement du clavier de haut en bas, cliquez sur la souris et entrez l'opération.
2. Lorsque vous cliquez sur le document, la liste déroulante est masquée à l'exception de la zone de saisie actuelle. La correspondance automatique et d'autres opérations seront mises en œuvre lors de la saisie.
Je n’entrerai pas dans les détails, mais c’est similaire à la fonction d’envoi automatique d’e-mails lors de l’inscription en ligne. Si vous rencontrez des bugs, vous pouvez me laisser un message. Il se fait tard, alors ne soyez pas verbeux ! Collez directement le code :
Le code CSS est le suivant :
Copiez le code comme suit :
<style>
*{marge:0;padding:0;}
ul,li{list-style:aucun;}
.inputElem {largeur : 198 px ; hauteur : 22 px ; hauteur de ligne : 22 px ; bordure : 1px solide #ff4455 ;}
.parentCls{largeur:200px;}
.auto-tip li{largeur:100%;hauteur:22px;hauteur de ligne:22px;taille de police:14px;}
.auto-tip li.hoverBg{background:#ddd;cursor:pointer;}
.red{couleur:rouge;}
.hidden {affichage : aucun ;}
</style>
Le code JS est le suivant :
Copiez le code comme suit :
/**
* Plug-in d'invite automatique par e-mail
* @constructor EmailAutoComplete
* @ options {objet} éléments configurables
*/
fonction EmailAutoComplete(options) {
ceci.config = {
targetCls : '.inputElem', // élément d'entrée cible
parentCls : '.parentCls', //La classe parent de l'élément d'entrée actuel
HiddenCls : '.hiddenCls', // champ caché d'entrée actuel
searchForm : '.jqtransformdone', //formulaire
hoverBg: 'hoverBg', // L'arrière-plan sur lequel la souris remonte
inputValColor : 'red', //Couleur de l'invite de saisie de la zone de saisie
mailArr : ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com ","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"], //Tableau de courrier électronique
isSelectHide : true, // Le fait de masquer la liste déroulante lorsque vous cliquez dessus est vrai par défaut.
rappel : null //Cliquez sur une fonction de rappel d'élément
} ;
ceci.cache = {
onlyFlag : true, // Rendu une seule fois
Indice actuel : -1,
ancienIndex : -1
} ;
this.init(options);
}
EmailAutoComplete.prototype = {
constructeur : EmailAutoComplete,
init : fonction (options) {
this.config = $.extend(this.config,options || {});
var soi = ceci,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).each(function(index,item){
$(item).keyup(function(e){
var cible = e.cible,
targetVal = $.trim($(this).val()),
code clé = e.keyCode,
elemHeight = $(this).outerHeight(),
elemWidth = $(this).outerWidth(),
parentNode = $(this).closest(_config.parentCls);
$(parentNode).css({'position':'relative'});
//Si la valeur de la zone de saisie est vide, la zone déroulante est masquée
si (valeurcible == '') {
$(item).attr({'data-html':''});
//Attribuer une valeur au champ masqué
$(_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);
}autre {
$(item).attr({'data-html':targetVal});
//Attribuer une valeur au champ masqué
$(_config.hiddenCls,parentNode).val(targetVal);
$(".auto-tip",parentNode) && $(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).removeClass('hidden');
// Afficher le contenu de la liste déroulante
self._renderHTML({keycode:keycode,e:e,target:target,targetVal:targetVal,height:elemHeight,width:elemWidth,parentNode:parentNode});
}
});
});
// Empêcher la soumission du formulaire par défaut avec la touche Entrée
$(_config.searchForm).each(function(index,item) {
$(item).keydown(function(e){
var keyCode = e.keyCode;
si (code clé == 13) {
renvoie faux ;
}
});
});
// La liste déroulante est masquée lorsque l'on clique sur le document.
$(document).click(function(e){
e.stopPropagation();
var cible = e.cible,
tagCls = _config.targetCls.replace(/^/./,'');
if(!$(target).hasClass(tagCls)) {
$('.auto-tip') && $('.auto-tip').each(function(index,item){
!$(item).hasClass('hidden') && $(item).addClass('hidden');
});
}
});
},
/*
* Rendre le contenu de l'invite de la liste déroulante
* @param cfg{objet}
*/
_renderHTML : fonction(cfg) {
var soi = ceci,
_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');
si(curIndex > -1){
// Opérations haut et bas du clavier
self._keyUpAndDown(cfg.targetVal,cfg.e,cfg.parentNode);
}autre {
si(/@/.test(cfg.targetVal)) {
curVal = cfg.targetVal.replace(/@.*/,'');
}autre {
curVal = cfg.targetVal;
}
si(_cache.onlyFlag) {
$(cfg.parentNode).append('<input type="hidden"/>');
var wrap = '<ul>';
pour(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 = faux ;
$(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});
}
//Ajouter l'attribut data-html à tous les li
$('.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});
});
// Correspond exactement au contenu
self._accurateMate({target:cfg.target,parentNode:cfg.parentNode});
//Lorsque la souris passe sur un élément li
self._itemHover(cfg.parentNode);
//Lorsque l'on clique sur l'élément correspondant
self._executeClick(cfg.parentNode);
}
},
/**
* Correspond exactement à quelque chose
*/
_accurateMate : fonction (cfg) {
var soi = ceci,
_config = self.config,
_cache = self.cache;
var curVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html')),
newArrs = [];
si(/@/.test(curVal)) {
// Récupère la valeur avant et après @
var préfixe = curVal.replace(/@.*/, ""),
suffixe = curVal.replace(/.*@/, "");
$.map(_config.mailArr,function(n){
var reg = new RegExp (suffixe);
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');
varhtml = '';
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);
//Ajouter l'attribut data-html à tous les li
$('.auto-tip li',cfg.parentNode).each(function(index,item){
$('.output-num',item).html(préfixe);
!$('.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});
});
// Lorsqu'un élément correspond avec précision, rend l'index actuel égal à la valeur initiale
_cache.currentIndex = -1 ;
_cache.oldIndex = -1 ;
$('.auto-tip .output-num',cfg.parentNode).html(prefix);
//Lorsque la souris passe sur un élément li
self._itemHover(cfg.parentNode);
//Lorsque l'on clique sur l'élément correspondant
self._executeClick(cfg.parentNode);
}autre {
$(".auto-tip",cfg.parentNode) && !$(".auto-tip",cfg.parentNode).hasClass('hidden') &&
$(".auto-tip",cfg.parentNode).addClass('hidden');
$('.auto-tip',cfg.parentNode).html('');
}
}
},
/*
* Lorsque la souris se déplace sur un élément li
*/
_itemHover : fonction (parentNode) {
var soi = ceci,
_config = self.config,
_cache = self.cache;
$('.auto-tip li',parentNode).hover(function(index,item) {
!$(this).hasClass(_config.hoverBg) && $(this).addClass(_config.hoverBg);
},fonction() {
$(this).hasClass(_config.hoverBg) && $(this).removeClass(_config.hoverBg);
});
},
/*
* Lorsque la valeur de la zone de saisie est vide, tous les éléments li sont supprimés avec la classe hoverBg
*/
_removeBg : fonction (parentNode) {
var soi = ceci,
_config = self.config;
$(".auto-tip li",parentNode).each(function(index,item){
$(item).hasClass(_config.hoverBg) && $(item).removeClass(_config.hoverBg);
});
},
/**
* Opérations des touches haut et bas du clavier
*/
_keyUpAndDown : fonction (targetVal, e, parentNode) {
var soi = ceci,
_cache = self.cache,
_config = self.config;
// Si les données sont renvoyées une fois la requête réussie (en fonction de la longueur de l'élément), effectuez les opérations suivantes
if($('.auto-tip' + ' li',parentNode) && $('.auto-tip' + ' li').length > 0) {
var plen = $('.auto-tip' + 'li',parentNode).length,
keyCode = e.keyCode;
_cache.oldIndex = _cache.currentIndex;
// Opération de déplacement vers le haut
si (code clé == 38) {
si(_cache.currentIndex == -1) {
_cache.currentIndex = plen - 1 ;
}autre {
_cache.currentIndex = _cache.currentIndex - 1;
si(_cache.currentIndex < 0) {
_cache.currentIndex = plen - 1 ;
}
}
si(_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);
//Attribuer une valeur au champ masqué
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 40) { //Opération de descente
if(_cache.currentIndex == plen - 1) {
_cache.currentIndex = 0 ;
}autre {
_cache.currentIndex++;
if(_cache.currentIndex > plen - 1) {
_cache.currentIndex = 0 ;
}
}
si(_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);
//Attribuer une valeur au champ masqué
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 13) { //Entrer l'opération
var curVal = $('.auto-tip' + ' .p-index'+_cache.oldIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curVal);
//Attribuer une valeur au champ masqué
$(_config.hiddenCls,parentNode).val(curVal);
si(_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 : fonction (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++) {
si(code == arrs[i]) {
je reviens;
}
}
renvoie -1 ;
},
/**
* Lorsque les données sont les mêmes, les données sont renvoyées lorsque l'on clique sur l'élément correspondant
*/
_executeClick : fonction (noeud parent) {
var _self = ceci,
_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);
si(_config.isSelectHide) {
!$(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).addClass('hidden');
}
//Attribuer une valeur au champ masqué
$(_config.hiddenCls,parentNode).val(dataAttr);
_config.callback && $.isFunction(_config.callback) && _config.callback();
});
}
} ;
// initialisation
$(fonction() {
nouveau EmailAutoComplete({});
});