How to automatically display the mailbox suffix list by entering a username by JS

Author：Eve Cole Update Time：2025-06-06 10:16:01

This article describes the method of automatically displaying the mailbox suffix list by entering a username by JS. Share it for your reference. The details are as follows:

The following is the code, save it to the html file to open:

Copy the code as follows:<!doctype html>

<html>

<head>

<title>Enter username to automatically display the mailbox suffix list</title>

<style>

*{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;}

</style>

</head>

<body>

<div>

Please enter the email username below:

<div>

</div>

</body>

</html>

The principle is: when I enter any word, the corresponding email prompt will be automatically pulled down. When I enter 11 in the input box, the drop-down box will have all 11 emails entered. When I enter other emails, there will be other emails corresponding to other copy.

Similarly, this plug-in does not require any html tags. It only requires an input box to have the corresponding class class name, which is OK. The parent has a class class name, and nothing else is needed. The internal HTML code is automatically generated.

The HTML code is as follows:

Copy the code as follows: <div>

</div>

In fact, the above div tags do not need to add a class as above to the input input box and the parent element (customization is also possible, but when JS initialization, it is OK. By default, the parent class is called parentCls, the current input box class is called inputElem, and the hidden field class is called hiddenCls. You can directly initialize the empty object when initializing!). Because there may be multiple input boxes on the page, a parent class is needed to distinguish which input box is, and of course a hidden domain storage value is needed for the development background.

There is an email array parameter mailArr in the configuration item: ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com","@yahoo.com".cn","@live.com","@sohu.com","@sina.com"]. It is to tell us that there are so many default mailboxes. No matter what drop-down box I enter, there are so many email prompts when initializing it. When I get to a certain item, I will give a prompt to a certain item drop-down. Of course, due to the change of the mailbox parameter, you can configure it according to the needs when initializing it.

The implemented functions are as follows:

1. Supports keyboard up and down operation, and supports mouse click and press Enter.

2. When clicking document, the drop-down box is hidden except for the current input input box. When input is followed, automatic matching and other operations are implemented.

Not to mention the details, it is similar to the automatic email prompt function when registering online. If there are any bugs, you can leave me a message, so I won’t go into details!

The CSS code is as follows:

Copy the code as follows: <style>