How to use the jQuery automatic completion plug-in completer

This article is to share with you about the use of the jQuery auto-completion plug-in completer, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

When we enter the form, if we want to enter the mailbox and so on, we only need to enter the first paragraph of the mailbox name, then the content after @ will be completed automatically, and several commonly used mailboxes will be listed, and the user can complete the input of the form just by selecting it. Such as time input, domain name input can be completed automatically, these are implemented by the plug-in completer to help you.

HTML

First load the jQuery library and plug-in completer.js, as well as related CSS style files, which have been packaged in the source download.

Next, we place the following code where we need to place the input box on the page, which is an input form that requires the user to enter a mailbox.

Javascript

The direct $(element). Completer () call is very simple, and you can use the data-toggle= "completer" and data-* attributes on the element to call the plug-in effect if you don't want to use a function call.

(function () {$("# auto-complete-email") .completer ({separator: "@", source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"]});})

Option settin

The Completer plug-in provides a wealth of option settings and method calls.

Option description default complete when the input is completed, trigger function () {} itemTag pop-up display panel list element tag "li" filter filter function, when input will first filter the relevant list contents and then display the list function (val) {return val;} position pop-up list panel relative to the input box, the values are "top", "right", "bottom", "left". "bottom" source will automatically complete the displayed data [] selectedClass the style "completer-selected" separator separator when the option in the pop-up panel is selected, separating the input from the suggested automatic completion, such as @ "" suggest if set to true, it will enter the recommended suggestion mode and automatically match the input content z-index value 1 in the css of the zIndex pop-up panel.

The above is the use of the jQuery auto-completion plug-in completer. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.