This article describes the JS input user name automatically displays the mailbox suffix list method. Share to everyone for your reference. Specifically as follows:
The following is the code, saved to an HTML file open:
principle is: an input box when I enter any word automatically pull down the corresponding mailbox prompts, in the input box 11 when the Drop-down box has 11 of the mailbox input other time there are other copy corresponding mailbox.
Similarly, this plugin does not require any HTML tags, only one input box has a corresponding class class name is OK and the parent has a class name, others do not need. The internal HTML code is automatically generated.
The HTML code is as follows:
In fact, the above DIV tag can not need just in the input box and the parent element to add a class (custom also can be, just in the JS initialization to pass the class on OK I by default the parent class is called Parentcls, The current input box class is called Inputelem, the hidden domain class is called hiddencls, initializes the incoming empty object directly when initializing! )。 Because there may be more than one input box on the page, you need a parent class to differentiate between the input boxes and, of course, a hidden field value to the development background.
In which there is a 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 "]. is to tell us that there are so many default mailboxes, no matter what I enter what dropdown box initialization when there are so many mailbox prompts, when I am accurate to a certain item when the hint to a specific drop-down. Of course, due to the requirements of the change mailbox This parameter can initialize itself according to the requirements of the configuration.
The following features are implemented:
1. Support keyboard to move up and down keyboard operation, support mouse click and press ENTER operation.
2. Click on document when the dropdown box is hidden except for the current input input box. When the next input time to implement automatic matching and so on operation.
Specifically not much said is similar to online registration when the mailbox automatically prompts the same function, if there are any bugs can give me a message, not wordy!
The CSS code is as follows:
Emailautocomplete.js Code click here to download the site.
I hope this article will help you with your JavaScript programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
