Comment utiliser un composant d'interface de saisie semi-automatique jQuery dans votre application

Le composant de saisie semi-automatique vous permet de fournir aux utilisateurs une liste d'options ou de suggestions en fonction de ce qu'ils saisissent dans un champ de texte. Ce blog se penche sur les tenants et les aboutissants du composant Autocomplete de jQuery et vous montre comment démarrer.

Dans le dernier épisode de cette série, nous avons abordé le `ComboBox` . Ce composant vous permet de sélectionner une seule option dans une liste ou de saisir une valeur personnalisée. Dans cet épisode, nous allons en apprendre davantage sur le composant jQuery `AutoComplete` . Cela consiste en un champ de texte qui affiche une liste d'options en fonction de ce qui a été saisi dans le champ. Il est également possible d'effectuer plusieurs sélections et d'entrer votre propre entrée. Un `AutoComplete` est généralement vu dans les champs de recherche. Lorsqu'un grand ensemble de données doit être sélectionné, comme un catalogue de magasin, il est plus pratique de fournir des suggestions et de filtrer les options pour l'utilisateur. Nous verrons comment utiliser le composant `AutoComplete` de jQuery.

AutoComplete de l'interface utilisateur de base du Kendo

Pour commencer, vous devrez créer un élément` input` et configurer la liste des options dans le fichier. API du composant utilisant un tableau ou un service de données distant. Dans l'exemple suivant, nous utiliserons la propriété `dataSource` pour ajouter un tableau. Notre gamme représentera des produits dans une épicerie. Voici la mise en œuvre:

Par défaut, vous ne verrez les options que lorsque vous commencerez à taper dans le champ . Les suggestions affichées seront filtrées par les éléments commençant par le texte. Cela peut être changé en définissant la propriété `filter` sur une autre option comme` contains` ou `endswith`. Si aucune option ne commence par le texte, un message par défaut apparaîtra. Vous pouvez personnaliser la vue lorsqu'il n'y a pas de données en configurant la propriété `noDataTemplate`. Si vous tapez quelque chose dans le champ mais que vous l'effacez, toutes les options s'afficheront. Si vous voulez sélectionner plusieurs options, vous ajoutez la propriété `separator`.

Regroupement d'éléments dans la saisie semi-automatique

Nos données ne doivent pas nécessairement être une chaîne d'éléments. Il peut également s'agir d'objets avec plusieurs champs. Disons que nous voulions afficher des informations supplémentaires sur les produits dans les suggestions. Nous allons modifier nos données pour avoir un champ pour le texte et un pour la catégorie du produit. Ensuite, nous regrouperons les éléments par catégorie dans la liste déroulante. Pour ce faire, nous allons d'abord ajouter un `dataTextField` afin que le composant sache quel champ des données utiliser comme texte affiché. Ensuite, notre `dataSource` sera changé en un objet qui a maintenant un champ` data` qui contient notre tableau et un champ `group` qui spécifie le nom de champ dans nos données à regrouper. Ceci est le code mis à jour:

L'apparence du popup peut également être personnalisée. Par défaut, le libellé des groupes affichera uniquement le nom du groupe. Le libellé supérieur du groupe peut être modifié à l'aide de `fixedGroupTemplate`. Cela montre toujours le groupe actuel. Si notre liste était plus longue, sa valeur changerait à mesure que nous ferions défiler d'autres groupes dans la liste déroulante. Les autres groupes sont personnalisés via la propriété `groupTemplate`. Chaque élément de nos données peut également être affiché avec un code HTML personnalisé à l'aide de la propriété `template`.

Résumé

Le composant jQuery` AutoComplete` génère une liste d'options filtrées parmi lesquelles nous pouvons choisir sur la valeur du champ de texte. Les composants précédents que nous avons examinés partagent certaines similarités avec les fonctions de saisie semi-automatique et l’autre. Cependant, ils diffèrent soit par leur type de sélection et leur possibilité de modification. Voici une comparaison de leurs caractéristiques.

Chacun de ces composants permet le filtrage et peut être personnalisé avec des modèles. La différence de fonctionnalité est ce qui déterminera quand et où vous utiliserez chacun dans votre application. Le `AutoComplete` est idéal pour la recherche. Un ` ComboBox` est approprié pour sélectionner des numéros. Le `MultiSelect` peut être utilisé pour le marquage. Et un `DropDownList` peut être utilisé en remplacement d'un menu de sélection. Dans la prochaine leçon, nous examinerons le `MaskedTextBox` . Le but de ce composant est de contrôler le type de données qu'un utilisateur peut entrer dans le champ de texte.

Essayez la saisie semi-automatique pour vous-même

Vous souhaitez tirer parti de la saisie semi-automatique de l'interface Kendo, ou de l'une des 70 autres + Composants d'interface utilisateur Kendo prêts à l'emploi, comme jQuery Grid ou Scheduler ? Vous pouvez commencer un essai gratuit du Kendo UI aujourd'hui et commencer à développer vos applications plus rapidement.

Démarrez mon essai d’interface utilisateur Kendo

Versions angulaire, de réaction et de vue

Vous recherchez un composant d’interface utilisateur prenant en charge des environnements spécifiques? Consultez la saisie semi-automatique pour Angular la saisie semi-automatique pour React ou la saisie semi-automatique pour Vue .

Ressources