La saisie semi-automatique dans l'application Web prédit le reste d'un mot ou d'une phrase à mesure que l'utilisateur entre. Les utilisateurs appuyent généralement sur la touche Tab pour accepter les suggestions ou appuyez sur la touche flèche vers le bas pour accepter l'une des multiples suggestions.
Ce didacticiel expliquera comment utiliser la bibliothèque JavaScript Awesomplete pour créer des composants de la saisie semi-automatique dans votre site Web. Awesomplete a été fondée par Lea Verou, une conférencière, écrivaine et spécialiste bien connue dans le groupe de travail W3C CSS.
Points clés
Pourquoi ne pas utiliser les éléments de données HTML5?
L'élément de données HTML5 est probablement le moyen le plus simple de mettre en œuvre le site Web du site Web. Malheureusement, cet élément a un support de navigateur limité et sa mise en œuvre est incohérente (par exemple, Chrome ne correspond que depuis le début, Firefox correspond à tous). Il est également impossible de le coiffer en fonction de la conception de votre site Web, et bien que prometteur, ce ne soit peut-être pas encore le bon choix.
Awes-Assomple, en revanche, est un composant d'observation automatique personnalisable ultra-léger que vous pouvez mettre dans la page. Il n'a pas de dépendances (pas de jQuery), il fonctionne sur tous les navigateurs modernes, et il peut être conçu en fonction du thème de votre site Web.
Alors, qu'attendons-nous? Commençons!
Incluez Awes-Assomple
dans votre pagePour utiliser la bibliothèque Awesomplete, nous avons besoin de deux fichiers: awesomplete.css et awesomplete.js.
Vous pouvez utiliser Bower pour obtenir ces fichiers:
<code>bower install https://github.com/LeaVerou/awesomplete.git#gh-pages</code>
peut également être téléchargé directement à partir du site Web Awesomplete.
ou, incluez-les en incluant le CDN Rawgit (qui sert les fichiers d'origine directement à partir de GitHub avec l'en-tête de type contenu correct). Comme indiqué ci-dessous.
Pour instancier le composant de base, vous avez besoin d'un élément d'entrée avec une classe Awes-Assomple, ainsi que des options pertinentes dans l'élément de données. L'attribut de liste de l'élément d'entrée doit correspondre à l'ID de l'élément de données. Il s'agit d'une configuration par défaut raisonnable, car elle fournit une solution de secours pour tout utilisateur qui désactive JavaScript.
<code>bower install https://github.com/LeaVerou/awesomplete.git#gh-pages</code>
fonctions de base
Il existe de nombreuses façons d'utiliser cette bibliothèque multifonction. Commençons par un cas d'utilisation de base.
Les options de l'élément de données ci-dessus peuvent être déplacées vers l'attribut de liste de données de l'élément d'entrée lui-même.
<link rel="stylesheet" href="https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.css"> <input class="awesomplete" list="mylist" /> <datalist id="mylist"> <option value="One"> <option value="Two"> <option value="Three"> </datalist> <🎜>
La solution ci-dessus est très utile si votre option de saisie semi-automatique est statique. Cependant, pour créer une liste de manière dynamique et personnaliser davantage le comportement du composant assuré, nous avons besoin d'une méthode JavaScript.
<input class="awesomplete"
data-minchars="1"
data-maxitems="5"
data-list="China, India, Japan, Russia, UK, USA" />Ici, nous créons un objet Awes-Ampllement et le faisons deux paramètres: une référence à l'élément d'entrée et un objet littéral contenant les options de configuration.
Nous attribuons ensuite la propriété de liste de l'objet Awes-Assomple à un tableau qui contient une liste d'options de saisie semi-automatique. Dans la démo suivante, j'ai élargi le tableau du nom du pays, en utilisant cet extrait de code pratique.
Notez également que les propriétés Minchars, MaxItems et AutoFIRST sont les mêmes que les propriétés de données de données, de maxitems de données et de données de données dans la démonstration précédente.
Lors de l'instanciation de composants de saisie semi-automatique à l'aide de JavaScript, nous avons accès à de nombreuses autres propriétés, API et événements. Voyons ce qu'ils sont et comment les utiliser?
L'objet Awes-Assomple prend en charge quatre autres propriétés. Ce sont: filtrez, tri, élément et remplacer. Les quatre attributs sont attribués des fonctions.
Filtre Attribut contrôle comment les entrées sont appariées. Sa fonction de rappel prend deux paramètres: le texte de suggestion actuel (donc dans notre exemple, chaque valeur en "Chine", "Inde", "Japon", "Russie", "UK", "USA" à leur tour) et des cordes contenant des utilisateurs saisir. Par défaut, les entrées peuvent correspondre n'importe où dans la chaîne et sont insensibles à la casse.
L'exemple suivant montre comment faire de la correspondance de cas éveillée.
var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
minChars: 1,
maxItems: 5,
autoFirst: true
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];Voici comment l'utiliser pour trier les correspondances dans l'ordre alphabétique inverse:
function myFilterFunc(text, input) {
return text.indexOf(input) > -1;
}
var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
filter: myFilterFunc
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];
function mySortFunc(text, input) {
return text.localeCompare(input); // 修正此处，使用localeCompare进行排序
}
var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
sort: mySortFunc
});
awesomplete.list = ['Albania', 'Brazil', 'Chile', 'Denmark', 'Egypt'];Voici comment l'utiliser pour convertir la sélection des utilisateurs en majuscules:
function myItemFunc(text, input){
return Awesomplete.$.create("li", {
innerHTML: text.replace(RegExp(input.trim(), "gi"), "<mark>$&</mark>"),
"aria-selected": "false"
});
}
var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
item: myItemFunc
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];Creusez plus profondément - Événements, API et AJAX
Cette bibliothèque déclenche cinq événements personnalisés. Ce sont: Aweculete-Select, Awecule-SelectComplete, AweClete-Open, Awecute-Close et Awecutlete-Highlight.
Voici comment se connecter à chacun de ces événements:
<code>bower install https://github.com/LeaVerou/awesomplete.git#gh-pages</code>
Awesomplete fournit diverses méthodes sur l'objet Awes-Ampllement qui vous permettent de personnaliser son comportement:
Remarque: Open () n'ouvre pas actuellement la liste avant que l'événement d'entrée ne soit déclenché, mais il y a une demande de traction sur la page d'accueil du projet qui devrait résoudre ce problème.
Comme dernier exemple, voici comment utiliser Awes-Assomple avec des données obtenues à partir de l'API distante via AJAX. Je vais utiliser l'API des pays du reste ici, qui fournit aux utilisateurs de nombreuses données de pays.
Tout d'abord, initialisez le composant sans définir sa propriété de liste (j'utilise jQuery ici pour brièveté):
<link rel="stylesheet" href="https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.css"> <input class="awesomplete" list="mylist" /> <datalist id="mylist"> <option value="One"> <option value="Two"> <option value="Three"> </datalist> <🎜>
Ensuite, joignez un auditeur d'événements de Keyup:
<input class="awesomplete"
data-minchars="1"
data-maxitems="5"
data-list="China, India, Japan, Russia, UK, USA" />Lorsque l'utilisateur appuie sur la touche, nous devons obtenir la valeur de l'élément d'entrée et faire une demande:
var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
minChars: 1,
maxItems: 5,
autoFirst: true
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];Dans le rappel de réussite, nous pouvons traverser la réponse JSON, obtenir les noms de chaque ville et définir dynamiquement l'attribut de liste de l'objet Awes-Assomple:
function myFilterFunc(text, input) {
return text.indexOf(input) > -1;
}
var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
filter: myFilterFunc
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];c'est tout!
Conclusion
Dans ce didacticiel, nous avons vu comment implémenter facilement les composants de la saisie semi-automatique à l'aide de la bibliothèque Awes-Assomple légère et personnalisable dans votre projet. Le projet est toujours sous maintenance active et je vous encourage à le vérifier.
FAQ sur les composants de la saisie automatique JavaScript - FAQ d'Awesomplete
Pour installer Awes-Assomple, vous pouvez utiliser NPM ou le télécharger directement à partir du référentiel GitHub. Après l'installation, incluez les fichiers awesomplete.css et awesomplete.js dans votre fichier html. Pour utiliser Awes-Assomple, créez un élément d'entrée dans votre HTML et initialisez Awes-Assomple avec un nouveau Awes-Assomple (Entrée). Vous pouvez ensuite remplir la liste avec le tableau de suggestions.
Oui, vous pouvez personnaliser l'apparence du menu déroulant Awesomplete en écrasant la classe CSS dans le fichier Awesomplete.css. Vous pouvez modifier les couleurs, les polices et autres styles pour correspondre à la conception de votre site Web.
Awes-Assomple peut être utilisé avec des données dynamiques en utilisant la propriété List. Vous pouvez définir la propriété List sur le tableau de suggestions, qui mettra automatiquement à jour le menu déroulant à mesure que le tableau change.
Oui, vous pouvez utiliser Awes-Assomple avec des sources de données distantes à l'aide de la fonction AJAX. La fonction AJAX accepte une URL et une fonction de rappel, qui prend les données de l'URL et la transmet à la fonction de rappel.
Vous pouvez utiliser l'événement "Awesomplete-Select" pour gérer l'événement de sélection dans Awees Amplse. Cet événement est déclenché lorsque la suggestion est sélectionnée et vous pouvez ajouter un écouteur d'événement pour le gérer.
Oui, vous pouvez utiliser Awes-Assomple avec plusieurs champs d'entrée. Il vous suffit de créer une nouvelle instance Awes-Assomple pour chaque champ de saisie.
Vous pouvez utiliser la fonction de filtre pour filtrer les suggestions dans Awes-Assomple. La fonction de filtre accepte une suggestion et une valeur d'entrée, et renvoie True si la suggestion correspond à la valeur d'entrée.
Oui, vous pouvez utiliser Awes-Assomple avec d'autres bibliothèques JavaScript. Awes-Assomple est une bibliothèque autonome, il n'a donc pas de dépendances et n'est pas en conflit avec d'autres bibliothèques.
Vous pouvez utiliser la fonction de tri pour trier les suggestions dans Awes-Assomple. La fonction de tri accepte deux suggestions et renvoie des nombres négatifs, zéro ou positifs dans l'ordre des suggestions.
Oui, vous pouvez utiliser Awes-Assomple dans votre formulaire. Après avoir sélectionné une suggestion, la valeur du champ de saisie est définie sur la suggestion, il peut donc être soumis avec le formulaire.
Cette sortie révisée aborde les problèmes soulevés et fournit une explication plus complète et précise de la fonctionnalité d'Awesomplete.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Explication détaillée de l'événement onbeforeunload
La différence entre MongoDB et MySQL
Commandes shell couramment utilisées sous Linux
Téléchargement de l'application OuYi Exchange
Quel est le format du document ?
Quelle est la touche de raccourci pour la taille du pinceau ?
Comment annuler le renouvellement automatique à la Station B
Quelles sont les techniques de test courantes ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
