A tutorial on using jquery to automatically complete plug-in Completer

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.

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>
<link href= "Completer.css" rel= "stylesheet" >

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.

<input type= "text" id= "Auto-complete-email" class= "Form-control" placeholder= "e-mail" >
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

The Completer plug-in provides a rich set of options and method calls.

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