De la misma manera, este complemento no requiere ninguna etiqueta html. Solo necesita un cuadro de entrada con un nombre de clase correspondiente y el padre tiene un nombre de clase. El código HTML interno se genera automáticamente.
El código HTML es el siguiente:
Copie el código de código de la siguiente manera:
<div>
<tipo de entrada="texto">
</div>
De hecho, las etiquetas div anteriores no son necesarias. Solo necesita agregar una clase como se indica arriba en el cuadro de entrada y el elemento principal (también puede personalizarlo, simplemente pase la clase durante la inicialización de JS. De forma predeterminada, la clase principal. se llama parentCls, la clase del cuadro de entrada actual se llama inputElem y la clase de campo oculto se llama hideCls. ¡Puede inicializar y pasar directamente un objeto vacío durante la inicialización! Debido a que puede haber varios cuadros de entrada en la página, se necesita una clase principal para distinguir qué cuadro de entrada es. Por supuesto, se requiere un campo oculto para almacenar el valor para el backend de desarrollo.
Hay un parámetro de matriz de buzón mailArr en el elemento de configuración: ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@ hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"]. Es para decirnos que hay tantos buzones de correo predeterminados, no importa lo que ingrese, hay tantas indicaciones de buzón cuando se inicializa el cuadro desplegable. Cuando identifico un determinado elemento, daré un mensaje para identificar un determinado elemento. elemento en el cuadro desplegable. Por supuesto, debido a los cambios en la demanda, este parámetro del buzón se puede configurar según la demanda durante la inicialización.
El estilo de codificación sigue siendo el mismo que antes.
Las funciones implementadas son las siguientes:
1. Admite el movimiento del teclado hacia arriba y hacia abajo, hacer clic con el mouse e ingresar a la operación.
2. Al hacer clic en el documento, el cuadro desplegable se oculta excepto el cuadro de entrada actual. Se implementarán coincidencias automáticas y otras operaciones al ingresar.
No entraré en detalles, pero es similar a la función de aviso automático por correo electrónico al registrarse en línea. Si tienes algún error, puedes dejarme un mensaje. ¡Se está haciendo tarde, así que no hables con palabras! Pega el código directamente:
El código CSS es el siguiente:
Copie el código de código de la siguiente manera:
<estilo>
*{margen:0;relleno:0;}
ul,li{estilo de lista:ninguno;}
.inputElem {ancho:198px;alto:22px;alto de línea:22px;borde:1px sólido #ff4455;}
.parentCls{ancho:200px;}
.auto-tip li{ancho:100%;alto:22px;alto de línea:22px;tamaño de fuente:14px;}
.auto-tip li.hoverBg{fondo:#ddd;cursor:puntero;}
.rojo{color:rojo;}
.oculto {pantalla: ninguna;}
</estilo>
El código JS es el siguiente:
Copie el código de código de la siguiente manera:
/**
* Complemento de aviso automático de correo electrónico
* @constructor Correo electrónicoAutoComplete
* @ opciones {objeto} elementos configurables
*/
función EmailAutoComplete(opciones) {
this.config = {
targetCls: '.inputElem', // elemento de entrada de destino
parentCls: '.parentCls', //La clase principal del elemento de entrada actual
ocultoCls: '.hiddenCls', // campo oculto de entrada actual
searchForm: '.jqtransformdone', //formulario
hoverBg: 'hoverBg', // El fondo que mueve el mouse hacia arriba
inputValColor: 'rojo', //Color del mensaje de entrada del cuadro de entrada
mailArr: ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com ","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"], //Matriz de correo electrónico
isSelectHide: true, // Si se oculta el cuadro desplegable al hacer clic en él es verdadero de forma predeterminada.
devolución de llamada: nulo //Haga clic en la función de devolución de llamada de un elemento
};
este.caché = {
onlyFlag: verdadero, // Solo renderiza una vez
índice actual: -1,
índice antiguo: -1
};
this.init(opciones);
}
Correo electrónicoAutoComplete.prototipo = {
constructor: EmailAutoComplete,
inicio: función(opciones){
this.config = $.extend(this.config,opciones || {});
var yo = esto,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).cada(función(índice,elemento){
$(elemento).keyup(función(e){
var objetivo = e.objetivo,
targetVal = $.trim($(este).val()),
código clave = e.keyCode,
elemHeight = $(this).outerHeight(),
elemWidth = $(this).outerWidth(),
parentNode = $(this).closest(_config.parentCls);
$(parentNode).css({'posición':'relativa'});
//Si el valor del cuadro de entrada está vacío, el cuadro desplegable está oculto
si(valorobjetivo == '') {
$(item).attr({'data-html':''});
//Asignamos un valor al campo oculto
$(_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);
}demás {
$(item).attr({'data-html':targetVal});
//Asignamos un valor al campo oculto
$(_config.hiddenCls,parentNode).val(targetVal);
$(".auto-tip",parentNode) && $(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).removeClass('hidden');
// Representa el contenido del cuadro desplegable
self._renderHTML({keycode:keycode,e:e,target:target,targetVal:targetVal,height:elemHeight,width:elemWidth,parentNode:parentNode});
}
});
});
// Evita que el formulario se envíe mediante la tecla Intro predeterminada
$(_config.searchForm).cada(función(índice,elemento) {
$(elemento).keydown(función(e){
var códigoclave = e.códigoclave;
si(códigoclave == 13) {
devolver falso;
}
});
});
// El cuadro desplegable se oculta cuando se hace clic en el documento.
$(documento).hacer clic(función(e){
e.stopPropagation();
var objetivo = e.objetivo,
tagCls = _config.targetCls.replace(/^/./,'');
if(!$(objetivo).hasClass(tagCls)) {
$('.auto-tip') && $('.auto-tip').cada uno(función(índice,elemento){
!$(item).hasClass('oculto') && $(item).addClass('oculto');
});
}
});
},
/*
* Representar el contenido del mensaje del cuadro desplegable
* @param cfg{objeto}
*/
_renderHTML: función(cfg) {
var yo = esto,
_config = self.config,
_cache = self.cache,
curvaVal;
var curIndex = self._keyCode(cfg.keycode);
$('.auto-tip',cfg.parentNode).hasClass('hidden') && $('.auto-tip',cfg.parentNode).removeClass('hidden');
si(curIndex > -1){
// Operaciones de subir y bajar el teclado
self._keyUpAndDown(cfg.targetVal,cfg.e,cfg.parentNode);
}demás {
si(/@/.test(cfg.targetVal)) {
curVal = cfg.targetVal.replace(/@.*/,'');
}demás {
curVal = cfg.targetVal;
}
if(_cache.onlyFlag) {
$(cfg.parentNode).append('<input type="hidden"/>');
var envoltura = '<ul>';
for(var i = 0; i < _config.mailArr.length; i++) {
envoltura += '<li>'+'<span></span><em data-html="'+_config.mailArr[i]+'">'+_config.mailArr[i]+'</em> </li>';
}
envoltura += '</ul>';
_cache.onlyFlag = falso;
$(cfg.parentNode).append(wrap);
$('.auto-tip',cfg.parentNode).css({'posición':'absoluta','arriba':cfg.height,'ancho':cfg.width - 2 + 'px','izquierda' :0,
'border':'1px solid #ccc','z-index':10000});
}
//Añadir atributo data-html a todos los li
$('.auto-tip li',cfg.parentNode).cada uno(función(índice,elemento){
$('.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});
});
// Coincide exactamente con el contenido
self._accurateMate({target:cfg.target,parentNode:cfg.parentNode});
//Cuando el mouse se mueve sobre un elemento li
self._itemHover(cfg.parentNode);
//Cuando se hace clic en el elemento correspondiente
self._executeClick(cfg.parentNode);
}
},
/**
* Coincide exactamente con algo
*/
_accurateMate: función(cfg) {
var yo = esto,
_config = self.config,
_cache = self.cache;
var curVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html')),
nuevasArrs = [];
si(/@/.test(curVal)) {
//Obtiene el valor antes y después de @
prefijo var = curVal.replace(/@.*/, ""),
sufijo = curVal.replace(/.*@/, "");
$.map(_config.mailArr,función(n){
var reg = nueva RegExp(sufijo);
si(prueba.reg.(n)) {
newArrs.push(n);
}
});
if(nuevasArrs.longitud > 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);
//Añadir atributo data-html a todos los li
$('.auto-tip li',cfg.parentNode).cada uno(función(índice,elemento){
$('.output-num',item).html(prefijo);
!$('.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});
});
// Cuando un elemento coincide con precisión, iguala el índice actual al valor inicial
_cache.currentIndex = -1;
_cache.oldIndex = -1;
$('.auto-tip .output-num',cfg.parentNode).html(prefijo);
//Cuando el mouse se mueve sobre un elemento li
self._itemHover(cfg.parentNode);
//Cuando se hace clic en el elemento correspondiente
self._executeClick(cfg.parentNode);
}demás {
$(".auto-tip",cfg.parentNode) && !$(".auto-tip",cfg.parentNode).hasClass('hidden') &&
$(".auto-tip",cfg.parentNode).addClass('hidden');
$('.auto-tip',cfg.parentNode).html('');
}
}
},
/*
* Cuando el mouse se mueve sobre un elemento li
*/
_itemHover: función (parentNode) {
var yo = esto,
_config = self.config,
_cache = self.cache;
$('.auto-tip li',parentNode).hover(función(índice,elemento) {
!$(this).hasClass(_config.hoverBg) && $(this).addClass(_config.hoverBg);
},función() {
$(this).hasClass(_config.hoverBg) && $(this).removeClass(_config.hoverBg);
});
},
/*
* Cuando el valor del cuadro de entrada está vacío, todos los elementos li se eliminan con la clase hoverBg
*/
_removeBg: función(parentNode){
var yo = esto,
_config = self.config;
$(".auto-tip li",parentNode).cada uno(función(índice,elemento){
$(item).hasClass(_config.hoverBg) && $(item).removeClass(_config.hoverBg);
});
},
/**
* Operaciones de teclas arriba y abajo del teclado
*/
_keyUpAndDown: función(targetVal,e,parentNode) {
var yo = esto,
_cache = self.cache,
_config = self.config;
// Si los datos se devuelven después de que la solicitud fue exitosa (juzgados según la longitud del elemento), realice las siguientes operaciones
if($('.auto-tip' + 'li',parentNode) && $('.auto-tip' + 'li').length > 0) {
var plen = $('.auto-tip' + 'li',parentNode).length,
códigoclave = e.códigoclave;
_cache.oldIndex = _cache.currentIndex;
// Subir operación
si (código clave == 38) {
if(_cache.currentIndex == -1) {
_cache.currentIndex = plen - 1;
}demás {
_cache.currentIndex = _cache.currentIndex - 1;
si(_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);
//Asignamos un valor al campo oculto
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 40) { //Operación de bajar
if(_cache.currentIndex == plen - 1) {
_cache.currentIndex = 0;
}demás {
_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);
//Asignamos un valor al campo oculto
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 13) { //Ingresar operación
var curVal = $('.auto-tip' + ' .p-index'+_cache.oldIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curVal);
//Asignamos un valor al campo oculto
$(_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: función (código) {
var arreglos = ['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(código == arrs[i]) {
devolver yo;
}
}
devolver -1;
},
/**
* Cuando los datos son los mismos, los datos se devuelven cuando se hace clic en el elemento correspondiente
*/
_executeClick: función (parentNode) {
var _self = esto,
_config = _self.config;
$('.auto-tip' + 'li',parentNode).unbind('hacer clic');
$('.auto-tip' + ' li',parentNode).bind('clic',función(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');
}
//Asignamos un valor al campo oculto
$(_config.hiddenCls,parentNode).val(dataAttr);
_config.callback && $.isFunction(_config.callback) && _config.callback();
});
}
};
// inicialización
$(función() {
nuevo Correo electrónicoAutoComplete({});
});