Cómo mostrar automáticamente la lista de sufijo del buzón ingresando un nombre de usuario por JS

Autor：Eve Cole Fecha de actualización：2025-06-06 10:16:01

Este artículo describe el método para mostrar automáticamente la lista de sufijo del buzón ingresando un nombre de usuario por JS. Compártelo para su referencia. Los detalles son los siguientes:

El siguiente es el código, guárdelo en el archivo HTML para abrir:

Copie el código de la siguiente manera: <! DocType Html>

<html>

<title> Ingrese el nombre de usuario para mostrar automáticamente la lista de sufijo del buzón </title>

*{margen: 0; relleno: 0;}

UL, Li {estilo list: ninguno;}

.Inputelem {ancho: 198px; altura: 22px; línea de línea: 22px; borde: 1px sólido #ff4455;}

.ParentCls {ancho: 200px;}

.auto-tip li {ancho: 100%; altura: 22px; línea de línea: 22px; font-size: 14px;}

.auto-tip li.hoverbg {fondo: #ddd; cursor: pointer;}

.Red {color: rojo;}

.hidden {display: none;}

</style>

</ablo>

<Body>

<div>

Ingrese el nombre de usuario de correo electrónico a continuación:

<div>

</div>

</body>

</html>

El principio es: cuando ingreso cualquier palabra, el mensaje de correo electrónico correspondiente se retirará automáticamente. Cuando ingrese 11 en el cuadro de entrada, el cuadro desplegable tendrá los 11 correos electrónicos ingresados. Cuando ingrese otros correos electrónicos, habrá otros correos electrónicos correspondientes a otra copia.

Del mismo modo, este complemento no requiere ninguna etiqueta HTML. Solo requiere un cuadro de entrada para tener el nombre de clase de clase correspondiente, que está bien. El padre tiene un nombre de clase de clase y no se necesita nada más. El código HTML interno se genera automáticamente.

El código HTML es el siguiente:

Copie el código de la siguiente manera: <Div>

</div>

De hecho, las etiquetas DIV anteriores no necesitan agregar una clase como se indicó anteriormente al cuadro de entrada de entrada y el elemento principal (la personalización también es posible, pero cuando JS Inicialización, está bien. De manera predeterminada, la clase principal se llama ParentCls, la clase de cuadro de entrada actual se llama Inputelem, y la clase de campo oculto se llama HidenDencls. Puede inicializar directamente el objeto vacío cuando se inicializa!).).).).).).).).).).).).).).).).).).).).).).).).).).).).).).).).).).).).).). Debido a que puede haber múltiples cuadros de entrada en la página, se necesita una clase principal para distinguir qué cuadro de entrada es y, por supuesto, se necesita un valor de almacenamiento de dominio oculto para los antecedentes de desarrollo.

Hay un parámetro de matriz de correo electrónico 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"]. Los buzones.

Las funciones implementadas son las siguientes:

1. Admite la operación hacia arriba y hacia abajo del teclado, y admite el clic del mouse y presiona Entrar.

2. Al hacer clic en el documento, el cuadro desplegable está oculto a excepción del cuadro de entrada de entrada actual. Cuando se sigue la entrada, se implementan la coincidencia automática y otras operaciones.

Sin mencionar los detalles, es similar a la función de solicitud automática de correo electrónico al registrarse en línea. Si hay algún error, puede dejarme un mensaje, ¡así que no entraré en detalles!

El código CSS es el siguiente:

Copie el código de la siguiente manera: <Syle>