Da mesma forma, este plug-in não requer nenhuma tag html. Ele só precisa de uma caixa de entrada com um nome de classe correspondente e o pai possui um nome de classe. O código HTML interno é gerado automaticamente.
O código HTML é o seguinte:
Copie o código do código da seguinte forma:
<div>
<input type="texto">
</div>
Na verdade, as tags div acima não são necessárias. Você só precisa adicionar uma classe como acima na caixa de entrada e no elemento pai (você também pode personalizá-la, basta passar a classe durante a inicialização do JS. Por padrão, a classe pai). é chamada parentCls , a classe da caixa de entrada atual é chamada inputElem e a classe do campo oculto é chamada hiddenCls. Você pode inicializar e passar diretamente um objeto vazio durante a inicialização!). Como pode haver várias caixas de entrada na página, é necessária uma classe pai para distinguir qual caixa de entrada é. É claro que é necessário um campo oculto para armazenar o valor para o back-end de desenvolvimento.
Há um parâmetro de matriz de caixa de correio mailArr no item de configuração: ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@ hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"]. É para nos dizer que existem tantas caixas de correio padrão, não importa o que eu insira, há muitos prompts de caixa de correio quando a caixa suspensa é inicializada. Quando eu identificar um determinado item, darei um aviso para identificar um determinado item. item na caixa suspensa. Naturalmente, devido às mudanças na demanda, este parâmetro da caixa postal pode ser configurado de acordo com a demanda durante a inicialização.
O estilo de codificação ainda é o mesmo de antes.
As funções implementadas são as seguintes:
1. Suporta movimento do teclado para cima e para baixo, clique do mouse e entre na operação.
2. Ao clicar no documento, a caixa suspensa fica oculta, exceto a caixa de entrada atual. A correspondência automática e outras operações serão implementadas durante a entrada.
Não vou entrar em detalhes, mas é semelhante à função de prompt automático de e-mail ao se registrar online. Se você tiver algum bug, pode me deixar uma mensagem. Está ficando tarde, então não seja prolixo! Cole o código diretamente:
O código CSS é o seguinte:
Copie o código do código da seguinte forma:
<estilo>
*{margem:0;preenchimento:0;}
ul,li{estilo de lista:none;}
.inputElem {largura:198px;altura:22px;altura da linha:22px;borda:1px sólido #ff4455;}
.parentCls{largura:200px;}
.auto-tip li{largura:100%;altura:22px;altura da linha:22px;tamanho da fonte:14px;}
.auto-tip li.hoverBg{fundo:#ddd;cursor:ponteiro;}
.vermelho{cor:vermelho;}
.oculto {exibição: nenhum;}
</estilo>
O código JS é o seguinte:
Copie o código do código da seguinte forma:
/**
* Plug-in de prompt automático de e-mail
* @constructor EmailAutoComplete
* @ options {object} itens configuráveis
*/
function EmailAutoComplete(opções) {
isto.config={
targetCls: '.inputElem', // elemento de entrada de destino
parentCls: '.parentCls', //A classe pai do elemento de entrada atual
hiddenCls: '.hiddenCls', // campo oculto de entrada atual
searchForm: '.jqtransformdone', //formulário de formulário
hoverBg: 'hoverBg', // O fundo que o mouse move para cima
inputValColor: 'red', //Cor do prompt de entrada da caixa 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 e-mail
isSelectHide: true, // Se a caixa suspensa deve ser ocultada ao clicar nela, é verdadeiro por padrão.
callback: null //Clica em uma função de retorno de chamada de item
};
este.cache = {
onlyFlag : true, // Renderiza apenas uma vez
índice atual: -1,
índice antigo: -1
};
this.init(opções);
}
EmailAutoComplete.prototype = {
construtor: EmailAutoComplete,
inicialização: função(opções){
this.config = $.extend(this.config,options || {});
var self = isso,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).each(function(index,item){
$(item).keyup(função(e){
var alvo = e.target,
targetVal = $.trim($(este).val()),
código-chave = e.keyCode,
elemHeight = $(this).outerHeight(),
elemWidth = $(this).outerWidth(),
parentNode = $(this).closest(_config.parentCls);
$(parentNode).css({'posição':'relativo'});
//Se o valor da caixa de entrada estiver vazio, a caixa suspensa ficará oculta
if(valoralvo == '') {
$(item).attr({'data-html':''});
//Atribuir um valor ao 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);
}outro {
$(item).attr({'data-html':targetVal});
//Atribuir um valor ao campo oculto
$(_config.hiddenCls,parentNode).val(targetVal);
$(".auto-tip",parentNode) && $(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).removeClass('hidden');
// Renderiza o conteúdo da caixa suspensa
self._renderHTML({keycode:keycode,e:e,target:target,targetVal:targetVal,height:elemHeight,width:elemWidth,parentNode:parentNode});
}
});
});
// Impede que o formulário seja enviado por padrão tecla enter
$(_config.searchForm).each(function(index,item) {
$(item).keydown(função(e){
var keyCode = e.keyCode;
if(códigochave == 13) {
retornar falso;
}
});
});
// A caixa suspensa fica oculta quando o documento é clicado.
$(documento).click(função(e){
e.stopPropagation();
var alvo = e.target,
tagCls = _config.targetCls.replace(/^/./,'');
if(!$(target).hasClass(tagCls)) {
$('.auto-tip') && $('.auto-tip').each(function(index,item){
!$(item).hasClass('oculto') && $(item).addClass('oculto');
});
}
});
},
/*
* Renderizar conteúdo do prompt da caixa suspensa
* @param cfg{objeto}
*/
_renderHTML: função(cfg) {
var self = isso,
_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){
//Operações para cima e para baixo do teclado
self._keyUpAndDown(cfg.targetVal,cfg.e,cfg.parentNode);
}outro {
if(/@/.test(cfg.targetVal)) {
curVal = cfg.targetVal.replace(/@.*/,'');
}outro {
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 = falso;
$(cfg.parentNode).append(wrap);
$('.auto-tip',cfg.parentNode).css({'position':'absolute','top':cfg.height,'width':cfg.width - 2 + 'px','left' :0,
'border':'1px sólido #ccc','z-index':10000});
}
//Adiciona o atributo data-html a todos os 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});
});
//Corresponde exatamente ao conteúdo
self._accurateMate({target:cfg.target,parentNode:cfg.parentNode});
//Quando o mouse passa sobre um item li
self._itemHover(cfg.parentNode);
//Quando o item correspondente é clicado
self._executeClick(cfg.parentNode);
}
},
/**
* Corresponder exatamente a algo
*/
_accurateMate: função(cfg) {
var self = isso,
_config = self.config,
_cache = self.cache;
var curVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html')),
novoArrs = [];
if(/@/.test(curVal)) {
// Obtém o valor antes e depois de @
var prefixo = curVal.replace(/@.*/, ""),
sufixo = curVal.replace(/.*@/, "");
$.map(_config.mailArr,function(n){
var reg = novo RegExp(sufixo);
if(reg.teste(n)) {
novoArrs.push(n);
}
});
if(newArrs.length > 0) {
$('.auto-tip',cfg.parentNode).html('');
$(".auto-tip",cfg.parentNode) && $(".auto-tip",cfg.parentNode).hasClass('hidden') &&
$(".dica automática",cfg.parentNode).removeClass('oculto');
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);
//Adiciona o atributo data-html a todos os li
$('.auto-tip li',cfg.parentNode).each(function(index,item){
$('.output-num',item).html(prefixo);
!$('.output-num',item).hasClass(_config.inputValColor) &&
$('.output-num',item).addClass(_config.inputValColor);
var emVal = $.trim($('.em',item).attr('data-html'));
$(item).attr('dados-html','');
$(item).attr({'data-html':prefix + '' +emVal});
});
// Quando um item é correspondido com precisão, torna o índice atual igual ao valor inicial
_cache.currentIndex = -1;
_cache.oldIndex = -1;
$('.auto-tip .output-num',cfg.parentNode).html(prefixo);
//Quando o mouse passa sobre um item li
self._itemHover(cfg.parentNode);
//Quando o item correspondente é clicado
self._executeClick(cfg.parentNode);
}outro {
$(".dica automática",cfg.parentNode) && !$(".dica automática",cfg.parentNode).hasClass('oculto') &&
$(".dica automática",cfg.parentNode).addClass('oculto');
$('.auto-tip',cfg.parentNode).html('');
}
}
},
/*
* Quando o mouse passa sobre um item li
*/
_itemHover: function(parentNode) {
var self = isso,
_config = self.config,
_cache = self.cache;
$('.auto-tip li',parentNode).hover(function(index,item) {
!$(this).hasClass(_config.hoverBg) && $(this).addClass(_config.hoverBg);
},função(){
$(this).hasClass(_config.hoverBg) && $(this).removeClass(_config.hoverBg);
});
},
/*
* Quando o valor da caixa de entrada está vazio, todos os itens li são excluídos com a classe hoverBg
*/
_removeBg: função(parentNode){
var self = isso,
_config = self.config;
$(".dica automática li",parentNode).each(function(index,item){
$(item).hasClass(_config.hoverBg) && $(item).removeClass(_config.hoverBg);
});
},
/**
* Operações das teclas para cima e para baixo do teclado
*/
_keyUpAndDown: função(targetVal,e,parentNode) {
var self = isso,
_cache = self.cache,
_config = self.config;
// Se os dados forem retornados após a solicitação ser bem-sucedida (avaliado com base no comprimento do elemento), execute as seguintes operações
if($('.auto-tip' + ' li',parentNode) && $('.auto-tip' + ' li').length > 0) {
var plen = $('.auto-tip' + 'li',parentNode).length,
keyCode = e.keyCode;
_cache.oldIndex = _cache.currentIndex;
//Move a operação para cima
if(códigochave == 38) {
if(_cache.currentIndex == -1) {
_cache.currentIndex = plen - 1;
}outro {
_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);
//Atribuir um valor ao campo oculto
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 40) { //Mover operação para baixo
if(_cache.currentIndex == plen - 1) {
_cache.currentIndex = 0;
}outro {
_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);
//Atribuir um valor ao campo oculto
$(_config.hiddenCls,parentNode).val(curAttr);
}
}else if(keyCode == 13) { //Inserir operação
var curVal = $('.auto-tip' + ' .p-index'+_cache.oldIndex,parentNode).attr('data-html');
$(_config.targetCls,parentNode).val(curVal);
//Atribuir um valor ao campo oculto
$(_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: função(código) {
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(código == arrs[i]) {
retornar eu;
}
}
retornar -1;
},
/**
* Quando os dados são iguais, os dados são retornados quando o item correspondente é clicado
*/
_executeClick: function(parentNode) {
var _self = isso,
_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');
}
//Atribuir um valor ao campo oculto
$(_config.hiddenCls,parentNode).val(dataAttr);
_config.callback && $.isFunction(_config.callback) && _config.callback();
});
}
};
//inicialização
$(função(){
novo EmailAutoComplete({});
});