Complément de plug-in de saisie semi-automatique jQuery avec le code source download_jquery

Lorsque nous entrons dans le formulaire, si nous voulons saisir une adresse e-mail, etc., il nous suffit de saisir la première partie du nom de l'e-mail, puis le contenu après @ sera automatiquement complété, et plusieurs adresses e-mail couramment utilisées seront répertoriés et l'utilisateur n'a qu'à les sélectionner. Complétez la saisie du formulaire. La saisie de l'heure et du nom de domaine peut être effectuée automatiquement. Ceux-ci sont tous implémentés pour vous par le plug-in.

L'affichage de l'effet est le suivant :

Affichage de l'effet Téléchargement du code source

HTML

Chargez d'abord la bibliothèque jQuery et le plug-in completer.js, et bien sûr les fichiers de style CSS pertinents, qui sont tous regroupés dans le téléchargement du code source.

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

Ensuite, nous plaçons le code suivant à l'endroit où la zone de saisie doit être placée sur la page. Il s'agit d'un formulaire de saisie qui demande à l'utilisateur de saisir son adresse e-mail.

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

Javascript

Il est très simple d'appeler $(element).completer() directement. Si vous ne souhaitez pas utiliser d'appel de fonction, vous pouvez également utiliser les attributs data-toggle="completer" et data-* sur l'élément. appelons l'effet plug-in.

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

Paramètres des options

Options	Description	Valeur par défaut
complet	Se déclenche lorsque la saisie est terminée	fonction() {}
itemTag	Balise d'élément de liste dans le panneau d'affichage contextuel	"li"
filtrer	Fonction de filtre, après saisie, elle filtrera d'abord le contenu de la liste pertinente, puis affichera la liste	function(val) { return val;
poste	La position du panneau de liste contextuelle par rapport à la zone de saisie, les valeurs sont "haut", "droite", "bas", "gauche".	"en bas"
source	Les données affichées seront automatiquement complétées	[]
Classe sélectionnée	Style lorsque l'option dans le panneau contextuel est sélectionnée	"sélectionné par le finaliste"
séparateur	séparateur, sépare le contenu d'entrée de la partie de saisie semi-automatique suggérée, telle que @	""
suggérer	S'il est défini sur true, il entrera en mode suggestion et correspondra automatiquement au contenu saisi	faux
modèle	Modèle pour panneau contextuel	"0c6ea2e7de1ef1d33a45458aec5734c7929d1f5ca49e04fdcb27f9465b944689"
zIndex	Valeur de l'index Z dans le CSS du panneau contextuel	1

Le plug-in complet fournit des paramètres d'options et des appels de méthodes riches.