JS-Methode zum automatischen Anzeigen der E-Mail-Suffixliste bei Eingabe eines Benutzernamens_Javascript-Kenntnisse

Das Beispiel in diesem Artikel beschreibt die Methode zur automatischen Anzeige der E-Mail-Suffixliste bei der Eingabe eines Benutzernamens mit JS. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Das Folgende ist der Code, speichern Sie ihn in einer HTML-Datei und öffnen Sie ihn:

*{margin:0;padding:0;}
ul,li{list-style:none;}
.inputElem {width:198px;height:22px;line-height:22px;border:1px solid #ff4455;}
.parentCls{width:200px;}
.auto-tip li{width:100%;height:22px;line-height:22px;font-size:14px;}
.auto-tip li.hoverBg{background:#ddd;cursor:pointer;}
.red{color:red;}
.hidden {display:none;}

Bitte geben Sie unten Ihren E-Mail-Benutzernamen ein:

Das Prinzip ist: Wenn ich ein beliebiges Wort in ein Eingabefeld eingebe, wird die entsprechende E-Mail-Eingabeaufforderung automatisch angezeigt. Wenn ich 11 in das Eingabefeld eingebe, werden im Dropdown-Feld alle Wörter angezeigt E-Mails von 11. Wenn ich andere Wörter eingebe, wird eine andere E-Mail-Adresse angezeigt.

In ähnlicher Weise benötigt dieses Plug-in keine HTML-Tags, es benötigt nur ein Eingabefeld mit einem entsprechenden Klassennamen, und das übergeordnete Element hat einen Klassennamen, und es ist nichts anderes erforderlich. Der interne HTML-Code wird automatisch generiert.

Der HTML-Code lautet wie folgt:

Tatsächlich ist das obige div-Tag nicht erforderlich. Sie müssen nur eine Klasse wie oben im Eingabefeld und im übergeordneten Element hinzufügen (Sie können es auch anpassen, indem Sie die Klasse einfach während der JS-Initialisierung übergeben. Standardmäßig ist die übergeordnete Klasse heißt parentCls, die aktuelle Eingabefeldklasse heißt inputElem und die Klasse des ausgeblendeten Felds heißt „hiddenCls“. Initialisieren Sie einfach das leere Objekt und übergeben Sie es direkt während der Initialisierung!). Da auf der Seite möglicherweise mehrere Eingabefelder vorhanden sind, ist eine übergeordnete Klasse erforderlich, um zu unterscheiden, um welches Eingabefeld es sich handelt. Natürlich ist ein verstecktes Feld erforderlich, um den Wert im Entwicklungs-Backend zu speichern.

Im Konfigurationselement gibt es einen Mailbox-Array-Parameter mailArr: ["@qq.com", "@qq2.com", "@gmail.com", "@126.com", "@163.com" , „@hotmail.com“, „@yahoo.com“, „@yahoo.com.cn“, „@live.com“, „@sohu.com“, „@sina.com“]. Es soll uns sagen, dass es so viele Standardpostfächer gibt, dass es beim Initialisieren des Dropdown-Felds so viele Postfachaufforderungen gibt Wählen Sie im Dropdown-Feld ein Element aus. Natürlich kann der E-Mail-Parameter aufgrund geänderter Anforderungen bei der Initialisierung entsprechend den Anforderungen konfiguriert werden.

implementiert die folgenden Funktionen:

1. Unterstützt Tastaturbewegungen nach oben und unten, Mausklick und Eingabevorgang.

2. Beim Klicken auf das Dokument wird das Dropdown-Feld bis auf das aktuelle Eingabefeld ausgeblendet. Wenn Sie mit der Eingabe fortfahren, werden automatischer Abgleich und andere Vorgänge implementiert.

Ich werde nicht auf Details eingehen, es ist genau wie die automatische E-Mail-Eingabeaufforderung bei der Online-Registrierung. Wenn Sie Fehler haben, können Sie mir eine Nachricht hinterlassen, ich werde nicht zu langatmig sein!

Der CSS-Code lautet wie folgt:

Klicken Sie hier für den Code emailAutoComplete.jsDownload von dieser Website.

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.