Méthode JS pour afficher automatiquement la liste des suffixes d'e-mail lors de la saisie d'un nom d'utilisateur_compétences javascript

L'exemple de cet article décrit la méthode d'affichage automatique de la liste des suffixes d'e-mail lors de la saisie d'un nom d'utilisateur à l'aide de JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici le code, enregistrez-le dans un fichier html et ouvrez-le :

Le principe est le suivant : Lorsque j'entre un mot dans une zone de saisie, l'invite de courrier électronique correspondante se déroulera automatiquement. Lorsque j'entre 11 dans la zone de saisie, la zone déroulante contiendra tous les mots. e-mails de 11. Lorsque j'entre d'autres mots, il y aura une autre adresse e-mail correspondante.

De même, ce plug-in ne nécessite aucune balise html, il n'a besoin que d'une zone de saisie avec un nom de classe correspondant, et le parent a un nom de classe, et rien d'autre n'est nécessaire. Le code HTML interne est généré automatiquement.

Le code HTML est le suivant :

En fait, la balise div ci-dessus n'est pas nécessaire. Il vous suffit d'ajouter une classe comme ci-dessus dans la zone de saisie et l'élément parent (vous pouvez également la personnaliser, il suffit de la transmettre dans la classe lors de l'initialisation JS. Par défaut, la classe parent La classe s'appelle parentCls, la classe de la zone de saisie actuelle s'appelle inputElem et la classe du champ caché s'appelle HiddenCls. Il suffit d'initialiser et de transmettre l'objet vide directement lors de l'initialisation !). Étant donné qu'il peut y avoir plusieurs zones de saisie sur la page, une classe parent est nécessaire pour distinguer de quelle zone de saisie il s'agit. Bien sûr, un champ masqué est nécessaire pour stocker la valeur dans le backend de développement.

Il y a un paramètre de tableau de boîte aux lettres mailArr dans l'élément de configuration : ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com" ,"@hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"]. Cela nous dit qu'il y a tellement de boîtes aux lettres par défaut. Peu importe ce que j'entre, il y a tellement d'invites de boîtes aux lettres lorsque la liste déroulante est initialisée. Lorsque j'identifie un certain élément, je donne une invite pour identifier un certain élément. élément dans la liste déroulante. Bien entendu, en raison de l'évolution des exigences, le paramètre email peut être configuré en fonction des besoins lors de son initialisation.

implémente les fonctions suivantes :

1. Prend en charge le mouvement du clavier de haut en bas, le clic de la souris et la saisie.

2. Lorsque vous cliquez sur le document, la zone déroulante est masquée à l'exception de la zone de saisie actuelle. Lorsque vous continuez à saisir, la correspondance automatique et d'autres opérations sont mises en œuvre.

Je n'entrerai pas dans les détails, c'est comme la fonction d'envoi automatique d'e-mails lors de l'inscription en ligne. Si vous avez des bugs, vous pouvez me laisser un message, je ne serai pas trop long !

Le code CSS est le suivant :