jQuery-Autovervollständigungs-Plug-in-Vervollständiger mit Quellcode download_jquery

Wenn wir das Formular eingeben, eine E-Mail-Adresse usw. eingeben möchten, müssen wir nur den ersten Teil des E-Mail-Namens eingeben, dann wird der Inhalt nach @ automatisch vervollständigt und mehrere häufig verwendete E-Mail-Adressen werden aufgelistet und der Benutzer muss sie nur auswählen. Die Eingabe von Zeit und Domainname kann automatisch durch den Plug-in-Completer durchgeführt werden.

Die Effektanzeige ist wie folgt:

Effektanzeige Quellcode-Download

HTML

Laden Sie zunächst die jQuery-Bibliothek und das Plug-in Completer.js sowie natürlich die relevanten CSS-Stildateien, die alle im Quellcode-Download enthalten sind.

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

Als nächstes platzieren wir den folgenden Code an der Stelle, an der das Eingabefeld auf der Seite platziert werden muss. Dies ist ein Eingabeformular, bei dem der Benutzer seine E-Mail-Adresse eingeben muss.

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

Javascript

Es ist sehr einfach, $(element).completer() direkt aufzurufen. Wenn Sie keinen Funktionsaufruf verwenden möchten, können Sie auch die Attribute data-toggle="completer" und data-* für das Element verwenden Rufen Sie den Plug-In-Effekt auf.

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

Optionseinstellungen

Optionen	Beschreibung	Standardwert
abgeschlossen	Wird ausgelöst, wenn die Eingabe abgeschlossen ist	function() {}
itemTag	Element-Tag im Popup-Anzeigefeld auflisten	"li"
Filter	Filterfunktion, nach der Eingabe wird zunächst der relevante Listeninhalt gefiltert und dann die Liste angezeigt	function(val) { return val }
Position	Die Position des Popup-Listenfelds relativ zum Eingabefeld, die Werte sind „oben“, „rechts“, „unten“, „links“.	"unten"
Quelle	Die angezeigten Daten werden automatisch vervollständigt	[]
selectedClass	Stil, wenn die Option im Popup-Fenster ausgewählt ist	"completer-selected"
Trennzeichen	-Trennzeichen, trennt den Eingabeinhalt vom vorgeschlagenen Teil der automatischen Vervollständigung, z. B. @	""
vorschlagen	Wenn auf „true“ gesetzt, wird der Vorschlagsmodus aktiviert und der eingegebene Inhalt automatisch abgeglichen	falsch
Vorlage	Vorlage für Popup-Panel	" "
zIndex	Z-Indexwert im CSS des Popup-Panels	1

Completer-Plug-in bietet umfangreiche Optionseinstellungen und Methodenaufrufe.