Comment utiliser un composant d'interface utilisateur de jQuery ComboBox dans votre application Web

Le ComboBox est à la fois un champ de texte et une liste déroulante, parfait pour donner des choix à vos utilisateurs tout en permettant leur saisie. Apprenez comment vous pouvez facilement en implémenter une avec l'interface utilisateur Kendo.

Dans le dernier épisode vous avez découvert le composant MultiSelect qui peut sélectionner plusieurs options. Dans cet épisode, nous visiterons le ComboBox .

A ComboBox est une combinaison d'un champ de texte et d'une liste déroulante. Vous pouvez choisir parmi les options du menu déroulant ou saisir manuellement la valeur. Une ComboBox peut être utilisée lorsqu'il est impossible de lister toutes vos options et que vous acceptez l'acceptation de la part de l'utilisateur. Par exemple, les données numériques peuvent être potentiellement infinies. Si vous utilisez un ComboBox pour choisir la taille de la police, il est judicieux de fournir quelques options et de laisser les utilisateurs entrer leur propre valeur. Dans cette leçon, nous allons voir comment utiliser l'interface utilisateur Kendo ComboBox lorsque nos données proviennent d'une source distante.

Basic ComboBox

Vous pouvez créer une ComboBox utilisant un élément avec les éléments définis dans les éléments de l'option . Ceci est similaire à la façon dont DropDownList et MultiSelect ont été créés. Je ne vais pas démontrer ici comment faire. Au lieu de cela, nous définirons nos options dans l'API du composant en configurant sa source de données . Le DataSource peut être un tableau ou un objet de configuration indiquant comment charger les éléments de données. Voici comment initialiser un ComboBox :

Le champ autoWidth fait de la liste déroulante la largeur de l'étiquette d'élément la plus longue. Par défaut, les étiquettes encapsulent la ligne si elles dépassent la largeur de la liste déroulante. Le champ index définit l'élément sélectionné dans la zone de liste déroulante . Une valeur de 0 sélectionne le premier élément. Et les données dataTextField et dataValueField définissent les noms des champs text et value utilisés dans le DataSource .

Obtention de données à distance

charger des données à partir d'une source distante comme une API, vous pouvez utiliser un objet de configuration au lieu d'un tableau dans la source de données . À l'intérieur de cet objet, vous devrez ajouter un objet transport . L'objet transport est responsable de la demande. Dans cet exemple, j'utilise l'API Github pour obtenir une liste de mes référentiels. Il s'agit de la source de données mise à jour :

 dataSource: {
  transport: {
    lis: {
      dataType: 'json',
      URL: 'https://api.github.com/users/albertaw/repos?page=1'
    }
  }
} 

Dans l'objet transport il y a un champ appelé lu qui est l'action utilisée pour obtenir les éléments de données. Le type de données correspond au type de résultat attendu du serveur. Les valeurs possibles incluent JSON, JSONP et XML. Et url est l'emplacement de la ressource, qui dans cet exemple est un point de terminaison API.

Spécification du schéma

Parfois, les données ne sont pas formatées exactement comme vous en avez besoin. Nous allons examiner une autre API qui renvoie une liste de collèges à New York. Cet endpoint API retournera des résultats avec plusieurs champs. Les informations dont nous avons besoin se trouvent dans le champ data . Toutefois, les éléments de données ne sont pas répertoriés en tant que paires clé-valeur. Au lieu de cela, chaque élément est un tableau. Ceci est un exemple d'un des éléments de données:

 [
  "row-t39z.h9at-i539",
  "00000000-0000-0000-73A0-165D70267CF5",
  0,
  1450729236,
  null,
  1450729236,
  null,
  "{ }",
  "POINT (-73.99465215457163 40.73519616365903)",
  "New School University / Parsons School Of Design",
  "66",
  "FIFTH AVENUE",
  "New York",
  "10011",
  "http://www.parsons.edu/html/splash.html",
  "1009619",
  "1005760042"
] 

La réponse a un champ colonne qui spécifie la signification de chaque entrée. Nous nous intéressons à l'élément à l'index 1 qui est l'ID et à l'élément à l'index 9 qui est le nom. Dans notre code, nous avons modifié l'URL dans le transport et ajouté un schéma pour configurer la réponse.

 dataSource: {
  transport: {
    lis: {
      dataType: 'json',
      url: 'https://data.cityofnewyork.us/api/views/8pnn-kkif/rows.json'
    }
  },
  schéma: {
    analyse: fonction (réponse) {
      return response.data.map (function (item) {
        return {name: item [9]id: item [1]}
      })
    }
  }
} 

L'option parse est utilisée pour prétraiter la réponse. À l'intérieur de la fonction, nous parcourons le tableau de données et enregistrons chaque élément en tant qu'objet avec un nom et un champ ID.

Conclusion

La source de données DataSource configure les éléments du composant. À l'intérieur de DataSource l'objet transport configure la manière dont vous obtiendrez les données et l'objet du schéma configure l'organisation des données. L'objet de transport peut également être utilisé pour créer, mettre à jour et supprimer des éléments de données. Dans l'objet schéma, la fonction parse a été utilisée pour obtenir notre tableau de données et l'analyser. Cependant, il existe un champ data que vous pouvez utiliser dans l'objet du schéma pour spécifier quel champ de la réponse contient les éléments de données. Il existe de nombreuses autres options non répertoriées ici qui vous permettent de personnaliser vos données à votre goût.

Dans la prochaine leçon, nous allons examiner le composant AutoComplete . La saisie semi-automatique est une zone de texte qui génère les options à sélectionner en fonction de ce qui a été saisi dans le champ.

Essayez le ComboBox pour vous-même

jQuery ComboBox ou l'un des 70 autres composants de l'interface utilisateur Kendo prête à l'emploi, comme Grille ou Scheduler ? Vous pouvez commencer un essai gratuit de Kendo UI dès aujourd'hui et commencer à développer vos applications plus rapidement.

Lancer mon test d'interface utilisateur Kendo

Versions angulaire, réactive et vue

Vous recherchez un composant d'interface utilisateur prenant en charge des infrastructures spécifiques? Consultez le ComboBox pour Angular le ComboBox pour React ou le ComboBox pour Vue .

Ressources