Construire un widget de saisie automatique JavaScript avec Aweshat

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

• Awesomplete est une bibliothèque JavaScript légère et personnalisable développée par Lea Verou pour les fonctionnalités de saisie semi-automatique dans les applications Web. Il n'a pas de dépendances et est compatible avec tous les navigateurs modernes.
• Pour utiliser Awes-Assomple, vous devez inclure deux fichiers dans la page Web: awesomplete.css et awesomplete.js. Le composant de base nécessite un élément d'entrée avec la classe "Awes-Assomple", ainsi que des options pertinentes dans l'élément de données.
• Awes-Assomplement fournit une variété de propriétés, y compris le filtre, le tri, l'élément et le remplacement, qui peuvent être utilisées pour personnaliser les composants de la saisie semi-automatique. Ces propriétés contrôlent la façon dont les entrées sont appariées, comment les éléments de liste sont triés, comment les éléments de liste sont générés et comment les sélections d'utilisateurs remplacent l'entrée des utilisateurs.
• La bibliothèque fournit plusieurs façons de personnaliser davantage son comportement, ainsi que cinq événements personnalisés qui peuvent être utilisés pour répondre aux différentes interactions utilisateur. Il peut également être utilisé avec des données dynamiques et des sources de données distantes, ce qui en fait un outil polyvalent pour améliorer l'expérience utilisateur du site Web.

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 page

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

Utiliser l'attribut de liste de données

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.

<code class="language-html"><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>
<option value="Two">
  </option>
<option value="Three">
</option></datalist>
</code>

en utilisant javascript

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.

<code class="language-html"><input class="awesomplete" data-minchars="1" data-maxitems="5" data-list="China, India, Japan, Russia, UK, USA"></code>

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?

Propriétés JavaScript étendues

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.

<code class="language-javascript">var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  minChars: 1,
  maxItems: 5,
  autoFirst: true
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];</code>

Trier les contrôles d'attribut comment les éléments de liste sont triés. Sa fonction de rappel a le même prototype que la fonction array.prototype.sort ().

Voici comment l'utiliser pour trier les correspondances dans l'ordre alphabétique inverse:

<code class="language-javascript">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"];</code>

Contrôles d'attribut d'élément Comment générer des éléments de liste. Cette fonction de rappel contient également deux paramètres: le texte actuellement recommandé et l'entrée utilisateur. Il doit renvoyer un élément de liste. Voici comment mettre en surbrillance la saisie de l'utilisateur dans le texte de la suggestion à l'aide d'attribut d'élément:

<code class="language-javascript">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'];</code>

Le quatrième et dernier attribut est l'attribut Remplacer. L'attribut Remplacer contrôle la façon dont l'utilisateur choisit de remplacer l'entrée de l'utilisateur. Par rapport aux trois fonctions précédentes, cette fonction de rappel accepte un paramètre: le texte de l'option sélectionnée. Lorsque l'utilisateur sélectionne l'une des options suggérées (par exemple, en cliquant dessus), elle est déclenchée.

Voici comment l'utiliser pour convertir la sélection des utilisateurs en majuscules:

<code class="language-javascript">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"];</code>

Intégrer tous les contenus

Il s'agit d'une démonstration montrant comment combiner les fonctions de filtre et d'élément et de ne faire des suggestions qu'après que l'utilisateur est entré dans le caractère spécifié (dans ce cas, une virgule suivie d'un espace):

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:

1. Open (): Utilisé pour ouvrir la fenêtre pop-up.
2. Close (): utilisé pour fermer la fenêtre contextuelle.
3. Next (): Utilisé pour mettre en surbrillance l'élément suivant de la fenêtre contextuelle.
4. PREMER (): Utilisé pour mettre en surbrillance l'élément précédent dans la fenêtre contextuelle.
5. goto (i): utilisé pour mettre en surbrillance les éléments avec l'index I dans la fenêtre contextuelle (-1 signifie désélectionner tous les éléments).
6. select (): utilisé pour sélectionner l'élément actuellement en surbrillance, remplacer la valeur du champ de texte par elle et fermer la fenêtre contextuelle.
7. évaluer (): utilisé pour évaluer l'état actuel de la composante et régénérer la liste des suggestions. Si aucune suggestion n'est disponible, fermez le pop-up. Cette méthode est particulièrement utile lors de la définition dynamique de la propriété de liste lorsque la fenêtre contextuelle est ouverte.

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.

fin

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é):

<code class="language-html"><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>
<option value="Two">
  </option>
<option value="Three">
</option></datalist>
</code>

Ensuite, joignez un auditeur d'événements de Keyup:

<code class="language-html"><input class="awesomplete" data-minchars="1" data-maxitems="5" data-list="China, India, Japan, Russia, UK, USA"></code>

Lorsque l'utilisateur appuie sur la touche, nous devons obtenir la valeur de l'élément d'entrée et faire une demande:

<code class="language-javascript">var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
  minChars: 1,
  maxItems: 5,
  autoFirst: true
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];</code>

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:

<code class="language-javascript">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"];</code>

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

Comment installer et utiliser Awes-Assomple dans mon projet?

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.

Puis-je personnaliser l'apparence du menu déroulant Awes-Assomple?

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.

Comment utiliser Awes-Assomple avec des données dynamiques?

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.

Puis-je utiliser Awes-Assomple avec une source de données distante?

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.

Comment gérer les événements de sélection dans Awes-Assomple?

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.

Puis-je utiliser Awes-Assomple avec plusieurs champs d'entrée?

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.

Comment filtrer les suggestions dans Awes-Assomple?

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.

Puis-je utiliser Awes-Assomple avec d'autres bibliothèques JavaScript?

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.

Comment trier les suggestions dans Awes-Assomple?

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.

Puis-je utiliser Awes-Assomple dans ma forme?

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!