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

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

WBOY

Freigeben： 2016-05-16 15:22:09

Original

1391 Leute haben es durchsucht

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">

Nach dem Login kopieren

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">

Nach dem Login kopieren

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"] 
 }); 
});

Nach dem Login kopieren

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.