The JS input box automatically prompts (with demo and source code)

Source: Internet
Author: User
Today, I asked my children's shoes in the javascriptQQ group if there were any & quot; JS input box email box prompts automatically & quot; plug-ins, that is, I found the source code on github and didn't see such plug-ins, then I thought about the & quot; JS input box and the email box automatically prompts & quot; and the simple JS input I wrote several times ago... syntaxHighli asked if there were any "JS input box email auto prompt" plug-ins in the javascriptQQ group today, that is, they all searched for the github source code and did not see such plug-ins, then I thought about the "JS input box email automatic prompt" and the simple JS input box fuzzy query plug-in function I wrote several times is similar! I also googled what kind of effect it was, and I saw nothing special about it, therefore, if you have nothing to do today, you can share it with everyone. In the future, if you encounter similar effects in the project, you can use it directly. So much! Let's first look at the effect to see what it looks like. In fact, sometimes I want to see what it looks like when I look at other people's blogs or code and then see if their code can run, then I followed this idea to study their internal code, so I provided the "demo download link" at the bottom. If you are free, you can also study the code I wrote. If you have any shortcomings, please kindly advise! Let's talk about it first! Let's take a look at the following results! For example, the principle is: An input box automatically pulls down the corresponding email prompt when I enter any words, when you enter 11 in the input box, all 11 mailboxes in the drop-down box will have other mailboxes corresponding to the text. Similarly, this plug-in does not require any html tags. It only requires a corresponding class name in the input box and a class name in the parent level. No other class names are required. Internal HTML code is automatically generated. The HTML code is as follows: In fact, the above div labels do not need to be added in the input box and the parent element to the above class (User-Defined can also, only when JS Initialization is required, it is OK to pass in the class. By default, the parent class is parentCls. The class in the current input box is inputElem, and the class in the hidden field is hiddenCls, you can directly initialize the input null object during initialization !). Because there may be multiple input boxes on the page, a parent class is required to distinguish the input box. Of course, a hidden Domain value should be provided to the development background. The configuration item contains 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"]. It is to tell us that there are so many default mailboxes, No matter what drop-down box I enter, there are so many mailbox prompts during initialization, when I get a certain item, I will give a prompt to get a specific item. Of course, because you need to change the mailbox parameter, you can configure it as needed during initialization. The Code style is the same as before. The following functions are implemented: 1. You can move the keyboard down or press Enter. 2. When you click document, the drop-down box is hidden except the current input box. When the input is followed, automatic matching is implemented. Not to mention, it is similar to the automatic mailbox prompt function during online registration. If you have any bugs, you can leave a message for me. It's not too late! Paste the Code directly: the CSS code is as follows: copy the code
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.