1. Requer um arquivo js: jQuery.mailautocomplete-3.1.js
A cópia do código é a seguinte:
(função ($) {
$ .fn.mailautocomplete = function (opções) {
VAR padrão = {
Boxclass: "MaillistBox", // estilo de caixa externa
ListClass: "maillistdefault", // estilo de lista padrão
FocusClass: "MaillistFocus", // Selecione o estilo na lista
MarkCalss: "MaillisthLignnt", // Estilo de destaque
Zindex: 1,
Autoclass: true, // se deve usar o plug-in com seu próprio estilo de classe
mailarr: ["qq.com", "gmail.com", "126.com", "163.com", "hotmail.com", "yahoo.com", "yahoo.com.cn", "Live. com "," sohu.com "," sina.com "], // matriz de e -mail
Texthint: false, // exibição automática e esconder
HintText: "",
FocusColor: "#333",
Blurcolor: "#999"
};
var com configurações = $ .extend ({}, padrões, opções || {});
// Página carregando estilo CSS
if (Settings.Autoclass && $ ("#maillistappendcss"). size () === 0) {
$ ('<style id = "maillistappendcss" type = "text/css">. MaillistBox {borda: 1px Solid #369; Background: #fff; font: 12px/20px arial;}. Cursor: Ponteiro; Espaço Branco: Nowrap;}. MaillistFocus {Padding: 0 5px; Cursor: Pointer; Espaço Branco: Nowrap; Background:#369; cor: branca;}. maillisthLignnt {color: #ffff;} </style> '). Appendto ($ ("head"));
}
var cb = Settings.BoxClass, Cl = Settings.Listclass, cf = Settings.focusclass, cm = Settings.markCalss;
var z = Settings.zindex, newarr = MaileRr = Settings.MAmarr, dica = Settings.texthint, text = Settings.hintText, fc = Settings.focusColor, BC = Settin Gs.blurcolor;
// Crie conteúdo interno da lista do email
$ .createhtml = função (str, arr, cur) {
var Mailhtml = "";
if ($. isarray (arr)) {
$ .ECH (arr, função (i, n) {
if (i === cur) {
Mailhtml+= '<div id = "maillist _'+i+'"> <pan>'+str+'</span>@'+arr [i]+'</div>';
}outro{
Mailhtml+= '<div id = "maillist _'+i+'"> <pan>'+str+'</span>@'+arr [i]+'</div>';
}
});
}
retornar Mailhtml;
};
// Algumas variáveis globais
var index = -1, s;
$ (this) .ECH (function () {
var que = $ (this), i = $ (". justforjs"). size ();
if (i> 0) {// liga apenas uma caixa de texto
retornar;
}
var w = that.outerwidth (), h = that.outerHeight ();
// Inicialização do estilo
that.wrap ('<span style = "display: em linha-bloco; posição: relativa;"> </span>')
.Before ('<div id = "maillistBox _'+i+''" style = "min-lar: '+w+' px; _width: '+w+' px; posição: absoluto; esquerda: -6000px; top: '+h+ 'px; z-index:'+z+'; "> </div>');
var x = $ ("#maillistbox_" + i), LiveValue;
that.focus (function () {
// O nível da etiqueta pai
$ (this) .css ("color", fc) .parent (). css ("z-index", z);
// Mostrar e ocultar texto rápido
if (dica && text) {
var focus_v = $ .Trim ($ (this) .val ());
if (focus_v === text) {
$ (this) .val ("");
}
}
// Evento do teclado
$ (this) .KeyUp (função (e) {
s = v = $ .Trim ($ (this) .val ());
if (/@/. test (v)) {
s = v.Replace (/@.*/, "");
}
if (v.Length> 0) {
// se a chave estiver para cima e para baixo a chave
if (e.KeyCode === 38) {
//acima
if (índice <= 0) {
índice = newarr.length;
}
índice--;
} else if (e.KeyCode === 40) {
//abaixo
if (index> = newarr.length - 1) {
índice = -1;
}
índice ++;
} else if (e.KeyCode === 13) {
//Digitar
if (index> -1 && Índice <newarr.length) {
// se houver atualmente uma lista de ativação
$ (this) .val ($ ("#maillist _"+index) .text ());
}
}outro{
if (/@/. test (v)) {
índice = -1;
// Obtenha o valor depois @
// s = v.replace (/@.*/, "");
// Crie uma nova matriz correspondente
var site = v.Replace (/.*@/, "");
newarr = $ .map (MaileRr, function (n) {
var reg = novo regexp (site);
if (reg.test (n)) {
retornar n;
}
});
}outro{
newarr = Mailer;
}
}
x.html ($. createhtml (s, newarr, index)). css ("esquerda", 0);
if (e.KeyCode === 13) {
//Digitar
if (index> -1 && Índice <newarr.length) {
// se houver atualmente uma lista de ativação
x.css ("esquerda", "-6000px");
}
}
}outro{
x.css ("esquerda", "-6000px");
}
}). Blur (function () {
if (dica && text) {
var bluur_v = $ .Trim ($ (this) .Val ());
if (blur_v === "") {
$ (this) .val (texto);
}
}
$ (this) .css ("color", bc) .unbind ("keyup"). Parent (). CSS ("z-index", 0);
x.css ("esquerda", "-6000px");
});
// O mouse passa o evento do item da lista
// O mouse passa
$ (". MaHHover"). Live ("MouseOver", function () {
índice = número ($ (this) .attr ("id"). split ("_") [1]);
LiveValue = $ ("#maillist _"+index) .text ();
x.Children ("." + cf) .RemoveClass (cf) .Addclass (Cl);
$ (this) .Addclass (cf) .RemoveClass (CL);
});
});
x.bind ("mousedown", function () {
that.val (LiveValue);
});
});
};
}) (jQuery);
2.JQ A biblioteca é obviamente essencial, então aqui é omitido
Vamos testá -lo abaixo
3. Folha de estilo:
A cópia do código é a seguinte:
<style type = "text/css">
.out_box {borda: 1px Solid #ccc;
.List_Box {Border-Bottom: 1px Solid #eee;
.focus_box {background:#f0f3f9;}
.mark_box {color:#c00;}
</style>
4. Código de teste
A cópia do código é a seguinte:
<p> Exibição da classe personalizada: <input type = "text" id = "customTest" size = "28" /> </p>
<script src = "js/jQuery-1.6.min.js" type = "text/javascript"> </script>
<script src = "js/jQuery.mailautocomplete-3.1.js" type = "text/javascript"> </script>
<script type = "text/javascript">
$ (function () {
$ ("#CustomTest"). MailAutocomplete ({
Boxclass: "out_box", // estilo de caixa externa
listclass: "list_box", // estilo de lista padrão
FocusClass: "Focus_Box", // Selecione o estilo na lista
MarkCalss: "Mark_box", // Estilo de destaque
Autoclasse: Falso,
Texthint: verdadeiro, // o texto rápido está automaticamente oculto
HINTTEXT: "Por favor, insira seu endereço de e -mail"
});
})
</script>