JQuery automatically completes plug-in completer with source code download, jquerycompleter

JQuery automatically completes plug-in completer with source code download, jquerycompleter

When entering the form, if you want to enter a mailbox or the like, you only need to enter the front-end of the mailbox name, then the content after @ will be automatically completed, and several frequently used mailboxes will be listed, you only need to select one option to complete the form input. For example, time input and domain name input can be completed automatically, which are implemented by the plug-in completer.

The following figure shows the effect:

Download the effect display source code

HTML

First load the jQuery library and plug-in completer. js, and of course there are related CSS style files, which have been packaged in the source code download.

<script src="jquery.js"></script> <script src="completer.js"></script> <link href="completer.css" rel="stylesheet"> 

Next we need to place the following code in the place where the input box is to be placed on the page. This is an input form that requires the user to enter the email address.

<input type="text" id="auto-complete-email" class="form-control" placeholder="E-mail"> 

Javascript

$ (Element ). the completer () call is very simple. If you do not want to use the function call method, you can use the data-toggle = "completer" and data-* attributes on the element to call 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

Option	Description	Default Value
Complete	Triggered when input is complete	Function (){}
ItemTag	The list element label in the display panel is displayed.	"Li"
Filter	Filter function. After the input, the system first filters the list content and then displays the list.	Function (val) {return val ;}
Position	The position of the List panel relative to the input box. The values include "top", "right", "bottom", and "left ".	"Bottom"
Source	Data to be automatically supplemented	[]
SelectedClass	The style when the option in the pop-up panel is selected	"Completer-selected"
Separator	Separator, which separates the input content from the part that is recommended to be completed automatically, such @	""
Suggest	If it is set to true, the suggestion mode is recommended and the entered content is automatically matched.	False
Template	Pop-up panel Template	"<Ul class =" completer-container "> </ul>"
ZIndex	The z-index value in the css of the pop-up panel	1

The Completer plug-in provides rich options for setting and calling methods.

Articles you may be interested in:

• PHP version of jquery autocomplete Application
• JQuery Autocomplete Automatic completion plug-in
• How to Use jquery autocomplete to automatically complete the plug-in
• JQuery-based Automatic plug-in
• Learning jQuery (11) practical form verification and Automatic completion prompt plug-in from scratch
• JQuery autocomplate self-extension plug-in, Automatic completion of sample code
• JQuery plug-in autocomplete automatically completes the application (auto-completion) (asp.net background)
• PHP combines jQuery. autocomplete plug-in to implement the function of automatically completing input prompts