When we enter the form, such as to enter the mailbox, just enter the front of the mailbox, then the content will be automatically completed, will be commonly used in a few mailboxes listed, users can only choose to complete the form of input. such as the time of input, domain name input can be automatically completed, these are plug-ins completer to help you achieve.
The effect is shown in the following illustration:
Effect Display source Download
Html
First load the jquery library and plugin completer.js, and of course the related CSS style files, which are already packaged in the source download.
<script src= "Jquery.js" ></script>
<script src= "Completer.js" ></script>
Next, we place the following code in the page where we need to place the input box, which is an input form that requires the user to enter a mailbox.
Javascript
Direct $ (Element). Completer () invocation, very simple, if you do not want to use function calls in the way you can use the data-toggle= "Completer" and data-* properties to invoke the plug-in effect.
$ (function () {
$ ("#auto-complete-email"). Completer ({
separator: "@",
Source: ["163.com", "qq.com", "" 126.com "," 139.com "," gmail.com "," hotmail.com "," icloud.com "]
});
Option settings
Options |
Description |
Default value |
Complete |
Triggered when input is complete |
function () {} |
Itemtag |
Pop-up list element labels in the display panel |
"Li" |
Filter |
Filter function, when input will first filter the relevant list content and then show the list |
Function (val) {return val;} |
Position |
Pop-up list panel relative to the position of the input box, the value is "top", "right", "bottom", "left". |
"Bottom" |
Source |
The data that will be automatically fully displayed |
[] |
Selectedclass |
The style when the options in the pop-up panel are selected |
"Completer-selected" |
Separator |
separator, separating the input from the recommended AutoComplete section, such as @ |
"" |
Suggest |
If set to True, it will enter the recommended suggestion mode, which will automatically match the entered content |
False |
Template |
Templates for pop-up panels |
"<ul class=" Completer-container "></ul>" |
ZIndex |
Z-index values in the CSS of the pop-up panel |
1 |
The Completer plug-in provides a rich set of options and method calls.