JS method to automatically display the email suffix list when entering a user name_javascript skills

The example in this article describes the method of automatically displaying the email suffix list when entering a user name using JS. Share it with everyone for your reference. The details are as follows:

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

Copy code The code is as follows:

Please enter your email username below:

The principle is: When I enter any word in an input box, the corresponding email prompt will automatically drop down. When I enter 11 in the input box, the drop-down box will have all the emails of 11. When I enter other words, there will be other copywriting. Corresponding email address.

Similarly, this plug-in does not require any html tags, it only needs an input box with a corresponding class name, and the parent has a class name, and nothing else is needed. The internal HTML code is automatically generated.

The HTML code is as follows:

Copy code The code is as follows:

In fact, the above div tag is not necessary. You only need to add a class as above in the input input box and parent element (you can also customize it, just pass in the class during JS initialization. By default, the parent The class is called parentCls, the current input box class is called inputElem, and the class of the hidden field is called hiddenCls. Just initialize and pass in the empty object directly during initialization!). Because there may be multiple input boxes on the page, a parent class is needed to distinguish which input box it is. Of course, a hidden field is needed to store the value in the development backend.

There is a mailbox 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 I enter, there are so many mailbox prompts when the drop-down box is initialized. When I pinpoint a certain item, I will give a prompt to pinpoint a certain item in the drop-down box. Of course, due to changes in requirements, the email parameter can be configured according to needs when initializing it.

implements the following functions:

1. Supports keyboard movement up and down, mouse click and enter operation.

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

I won’t go into details, it’s just like the automatic email prompt function when registering online. If you have any bugs, you can leave me a message, I won’t be too long-winded!

The CSS code is as follows:

Copy code The code is as follows:

Click here for emailAutoComplete.js codeDownload from this site.

I hope this article will be helpful to everyone’s JavaScript programming design.