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