1. Requiere un archivo JS: jQuery.Mailautocomplete-3.1.js
La copia del código es la siguiente:
(función ($) {
$ .fn.mailautocomplete = function (opciones) {
Var predeterminados = {
BoxClass: "Maillistbox", // estilo de caja externa
ListClass: "MaillistDefault", // Estilo de lista predeterminado
FocusClass: "Maillistfocus", // Seleccione el estilo en la lista
Markcalss: "Maillistlignt", // estilo destacado
Zindex: 1,
autoclass: true, // si usar el complemento con su propio estilo de clase
Mailarr: ["Qq.com", "Gmail.com", "126.com", "163.com", "hotmail.com", "yahoo.com", "yahoo.com.cn", "en vivo. com "," Sohu.com "," sina.com "], // matriz de correo electrónico
TexThint: False, // Pantalla automática y oculta de indicaciones de texto
hinttext: "",
FocusColor: "#333",
Blurcolor: "#999"
};
Configuración var = $ .extend ({}, defaults, opciones || {});
// Página Cargando estilo CSS
if (settings.autoclass && $ ("#maillistappendcss"). size () === 0) {
$ ('<style id = "maillistappendcss" type = "text/css">. maillistbox {border: 1px solid #369; fondos: #fff; font: 12px/20px arial;}. mail listdefault {padding: 0 5px; Cursor: Pointer; White-Space: Nowrap;}. Maillistfocus {relleno: 0 5px; cursor: pointer; white-space: nowrap; fondo:#369; color: blanco;}. maillistlignt {color: #ffff;} </ystye> '). appendTo ($ ("head"));
}
var cb = settings.boxClass, cl = settings.listclass, cf = settings.focusclass, cm = settings.markcalss;
var z = settings.zindex, newarr = mailarr = settings.mailarr, hint = settings.texThint, text = settings.hintText, fc = settings.focuscolor, bc = settin gs.blurColor;
// crear contenido de lista interna del correo electrónico
$ .createhtml = function (str, arr, cur) {
var mailhtml = "";
if ($. isarray (arr)) {
$ .each (arr, function (i, n) {
if (i === cur) {
mailhtml+= '<div id = "maillist _'+i+'"> <span>'+str+'</span>@'+arr [i]+'</div>';
}demás{
mailhtml+= '<div id = "maillist _'+i+'"> <span>'+str+'</span>@'+arr [i]+'</div>';
}
});
}
devolver mailhtml;
};
// Algunas variables globales
Var index = -1, s;
$ (this) .each (function () {
var that = $ (this), i = $ (". justforjs"). size ();
if (i> 0) {// Binde solo un cuadro de texto
devolver;
}
var w = that.outerwidth (), h = that.outerHeight ();
// Inicialización de estilo
that.wrap ('<span style = "Display: Inline-Block; Position: Relative;"> </span>')
.before ('<div id = "maillistbox _'+i+'" style = "min-width:'+w+'px; _width:'+w+'px; posición: absoluto; izquierda: -6000px; top:'+h+ 'px; z-index:'+z+'; "> </div>');
var x = $ ("#maillistbox_" + i), liveValue;
que.focus (function () {
// El nivel de etiqueta principal
$ (this) .css ("color", fc) .parent (). css ("z-index", z);
// Mostrar y ocultar texto rápido
if (tint && text) {
var focus_v = $ .trim ($ (this) .val ());
if (focus_v === text) {
$ (esto) .val ("");
}
}
// evento de teclado
$ (this) .keyUp (function (e) {
s = v = $ .trim ($ (this) .val ());
if (/@/. test (v)) {
s = v.replace (/@.*/, "");
}
if (v.length> 0) {
// Si la tecla está arriba y abajo
if (e.keycode === 38) {
//arriba
if (index <= 0) {
índice = newarr.length;
}
índice--;
} else if (e.keycode === 40) {
//abajo
if (index> = newarr.length - 1) {
índice = -1;
}
índice ++;
} else if (e.keycode === 13) {
//Ingresar
if (index> -1 && index <newarr.length) {
// Si actualmente hay una lista de activación
$ (this) .val ($ ("#maillist _"+index) .Text ());
}
}demás{
if (/@/. test (v)) {
índice = -1;
// Obtener el valor después de @
// s = v.replace (/@.*/, "");
// crear una nueva matriz coincidente
var sitio = v.replace (/.*@//, "");
newarr = $ .map (mailarr, function (n) {
var reg = new Regexp (Sitio);
if (reg.test (n)) {
regresar n;
}
});
}demás{
newarr = mailarr;
}
}
x.html ($. createhtml (s, newarr, index)). CSS ("izquierda", 0);
if (e.keycode === 13) {
//Ingresar
if (index> -1 && index <newarr.length) {
// Si actualmente hay una lista de activación
x.css ("izquierda", "-6000px");
}
}
}demás{
x.css ("izquierda", "-6000px");
}
}). Blur (function () {
if (tint && text) {
var blur_v = $ .trim ($ (this) .val ());
if (blur_v === "") {
$ (esto) .val (texto);
}
}
$ (this) .css ("color", bc) .unbind ("keyup"). parent (). css ("z-índice", 0);
x.css ("izquierda", "-6000px");
});
// El mouse pasa el evento del elemento de la lista
// El mouse pasa
$ (". Mailhover"). 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 () {
que.val (LiveValue);
});
});
};
}) (jQuery);
2. La biblioteca jQ es, por supuesto, esencial, así que aquí se omite
Vamos a probarlo a continuación
3. Hoja de estilo:
La copia del código es la siguiente:
<style type = "text/css">
.out_box {border: 1px sólido #ccc;
.list_box {Border-Bottom: 1px Solid #EEE;
.focus_box {fondo:#f0f3f9;}
.mark_box {color:#c00;}
</style>
4. Código de prueba
La copia del código es la siguiente:
<P> Pantalla de clase 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 caja externa
listClass: "list_box", // estilo de lista predeterminado
FocusClass: "Focus_box", // Seleccione el estilo en la lista
MarkCalss: "Mark_box", // destacado estilo
autoclass: falso,
TexThint: verdadero, // El texto de inmediato se oculta automáticamente
INSPINTO: "Ingrese su dirección de correo electrónico"
});
})
</script>