Créer un ComboBox modifiable en JavaScript
Nous utilisons le champ du formulaire de saisie à de nombreux endroits, en particulier lorsque nous travaillons avec des formulaires HTML.
Le champ de saisie ne nous permet d’avoir qu’une seule fonction, et c’est de saisir le texte à l’intérieur du champ de saisie. Et si vous souhaitez ajouter d’autres fonctionnalités comme une liste déroulante, vous devez utiliser un autre élément HTML pour l’implémenter.
Et si vous souhaitez implémenter ces deux fonctionnalités dans le champ de saisie lui-même. Est-ce même possible ?
Oui, cela peut être fait à l’aide d’une datalist. En utilisant datalist, nous pouvons créer un ComboBox éditable qui réalise simultanément deux fonctionnalités (c’est-à-dire la saisie de texte et la liste déroulante).
Créer un ComboBox modifiable en JavaScript
Ci-dessous, nous avons un document HTML composé d’une balise label et d’une balise script dans la balise body. L’étiquette est juste un texte qui aidera l’utilisateur à fournir des informations sur le ComboBox.
Et à l’aide de la balise script, nous avons lié un fichier JavaScript dans lequel nous allons écrire notre code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<label>List of Countries: </label>
<script src="./index.js"></script>
</body>
</html>
Production :
List of Countries:
Si vous exécutez le code, vous obtiendrez la sortie ci-dessus. Pour créer un ComboBox modifiable en JavaScript, nous devons suivre les étapes ci-dessous.
Etape 1 : Création d’une datalist en JavaScript
Notre objectif est de créer une combinaison d’un champ de saisie et d’une liste déroulante.
Nous allons d’abord créer une liste datalist, puis créer un champ de saisie. Après cela, nous ajouterons la datalist au champ de saisie.
Un élément HTML datalist crée une liste qui contient un ensemble d’options parmi lesquelles un utilisateur peut choisir. Les options à l’intérieur de la datalist sont représentées par l’élément HTML option.
Ci-dessous, nous avons créé une fonction appelée createDataList(), qui créera la datalist. A l’intérieur de cette fonction, nous avons créé un tableau de valeurs où nous avons spécifié toutes les options affichées sur la datalist.
Selon vos besoins, vous pouvez ajouter autant d’options que vous le souhaitez à la datalist. Pour créer une datalist, nous allons utiliser la fonction document.createElement() et passer datalist en paramètre et stocker la datalist dans la variable datalist.
Ensuite, nous allons définir un identifiant pour cette datalist en utilisant dataList.id. Pour ajouter les options stockées à l’intérieur de la variable values à la datalist, nous avons défini à l’intérieur du tableau ; nous utiliserons une boucle forEach pour parcourir chaque élément du tableau.
Chaque élément du tableau sera stocké dans la variable value par la boucle forEach. A l’intérieur du forEach, nous allons créer un élément HTML option.
Cet élément HTML option sera créé pour chaque option à chaque itération.
function createDataList() {
var values =
['Afghanistan', 'Åland Islands', 'Albania', 'Algeria', 'American Samoa'];
var dataList = document.createElement('datalist');
dataList.id = 'country_list';
values.forEach(value => {
var option = document.createElement('option');
option.innerHTML = value;
option.value = value;
dataList.appendChild(option);
})
document.body.appendChild(dataList);
}
createDataList();
À l’aide de option.innerHTML, nous spécifions les données que nous afficherons après avoir sélectionné une option particulière dans la liste. Le option.value spécifie quelles données seront affichées lorsque la liste est visible.
Par exemple, si option.innerHTML = "IN" et option.value = "INDIA", lorsque la liste est visible, vous verrez INDIA comme option, mais après avoir sélectionné l’option INDIA, à l’intérieur le champ de saisie, vous obtiendrez IN. Dans notre exemple, nous définissons ces deux valeurs de la même manière.
Après avoir attribué une valeur à notre option, nous pouvons ensuite ajouter cette option à la datalist. Enfin, après avoir assigné toutes les options à la datalist, nous pouvons ajouter la datalist à la balise body en utilisant la fonction appendChild.
Au final, nous appellerons la fonction createDataList(), qui créera la datalist. N’oubliez pas d’appeler cette fonction ; sinon, la datalist ne sera pas créée.
Étape 2 : Ajouter datalist à un champ de saisie
Maintenant que nous avons créé la datalist, nous pouvons ajouter cette liste au champ de saisie.
Pour cela, nous devons d’abord créer une balise input à l’intérieur de notre document HTML. Sur cette balise input, nous devons spécifier certains attributs tels que :
- type : Le type de données que le champ de saisie peut prendre. Dans notre cas, nous saisirons le nom du pays, qui est un texte, pour spécifier le type comme
texte. - id : identifiant unique du champ de saisie.
- list : C’est l’attribut le plus important, et cet attribut doit être précisé si vous utilisez une
datalist. Ici, la valeur de cet attribut sera l’idde l’élémentdatalist, que nous avons spécifié lors de la création de l’élémentdatalist.
<input type="text" id="country" list="country_list">
C’était tout le processus de création d’un ComboBox modifiable en JavaScript. Maintenant, vous exécutez le code dans votre navigateur pour voir la sortie.
Une fois la page Web chargée dans le navigateur, si vous double-cliquez sur le champ de saisie, il affichera la liste complète avec les options que nous avons définies dans la datalist comme indiqué ci-dessus.
Si vous commencez à taper les lettres dans le champ de saisie, il vous montrera également la liste. Mais les options affichées dans la liste peuvent varier en fonction des lettres que vous tapez.
Ci-dessus, nous pouvons créer et utiliser un ComboBox modifiable avec une double fonctionnalité de champ de saisie et de liste déroulante à l’aide de JavaScript.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn