Comment créer un Combobox modifiable en JavaScript

En JavaScript, le ComboBox est la combinaison d'une liste déroulante avec une zone de texte modifiable. Il est ajouté sur les pages Web afin que les utilisateurs puissent sélectionner un élément dans une liste déroulante spécifiée et peuvent modifier sa valeur en tapant. Il peut être utilisé dans le remplacement de la balise HTML car le texte ne peut pas être entré dans le champ Select. Le JavaScript ComboBox propose également des fonctionnalités de filtrage intégrées et un large éventail d'options de filtrage à l'aide de «dataliste".

Ce blog vous guidera tout au long du processus de création d'un Combobox modifiable en JavaScript.

Comment créer un Combobox modifiable en JavaScript?

Vous pouvez créer un Combobox modifiable avec l'aide de "dataliste". Dans HTM, utilisez la balise avec la balise en JavaScript, créez un élément d'ensemble de données à l'aide du "document.CreateElement ()"Méthode avec un tableau d'options qui seront ajoutées à la liste déroulante.

Examinons quelques exemples du concept déclaré.

Exemple 1: Créez un Combobox modifiable en HTML
Dans cet exemple, nous créerons un ComboBox pour la liste des fruits en HTML en utilisant la balise. Pour ce faire, ajoutez un titre, un étiquette et un champ de saisie avec le «des fruits”Liste comme ID du datalist:

ComboBox en utilisant HTML:

Liste des fruits:

Ensuite, utilisez la balise HTML, affectez-la «des fruits”ID et une liste des options requises:

Comme la liste déroulante avec plusieurs options nécessite un effort supplémentaire pour examiner les options fournies, le Combobox vous permet de filtrer la liste côte à côte en tapant le champ de texte:

La sortie ci-dessus montre la liste des fruits. Nous avons tapé "M"Dans le champ d'entrée, qui a filtré les noms de fruits qui contiennent"M" ou "m". En conséquence, nous avons sélectionné le nom du fruit souhaité à partir de la lettre tapée.

Exemple 2: Créez un ComboBox modifiable à l'aide de JavaScript
Ici, nous effectuerons la même tâche en utilisant JavaScript. Pour cela, nous allons d'abord créer un titre et une étiquette. Ensuite, ajoutez un champ de texte d'entrée et définissez son ID "fruit"Et la liste"fruit_list»:

ComboBox en utilisant HTML:

Liste des fruits:

En suivant les étapes données, nous créerons un ComboBox en JavaScript:

• Tout d'abord, définissez un «boîte combo()”Fonction dans un fichier javascript qui contient un tableau des options de liste déroulante stockées en variable"combattant".
• Ensuite, créez un élément "dataliste" en utilisant le "document.CreateElement ()" méthode.
• Après cela, définissez l'ID du comboliste à «fruit_list"Cela est ajouté dans la balise HTML.
• Appliquez la boucle ForEach pour ajouter la liste des options déroulantes en créant un élément "option"Pour chacune des valeurs de combobox ajoutées.
• Invoquez la fonction ComboBox () à la fin.

fonction combobox ()
var combovales = [«grenate», «pomme», «pêche», «abricot», «raisins», «banane», «poire», «kiwi», `` fraise »,« cerise »,« orange »,« mangue «,« Ananas »,« melon »,« avocat »,« melon d'eau »];
var combolist = document.CreateElement («Datalist»);
combattant.id = "fruit_list";
combattant.foreach (combovalues ​​=>
Var Option = Document.createElement ('option');
option.innerHtml = combovalues;
option.valeur = combovalues;
combattant.APPEDCHILD (OPTION);
)
document.corps.appenchild (combolist);

boîte combo();

Sortir

On peut voir que nous pouvons également modifier la valeur ComboBox après l'avoir sélectionnée dans la liste disponible:

Nous avons rassemblé les meilleures solutions pour créer un Combobox modifiable en JavaScript et HTML.

Conclusion

Pour créer un ComboBox modifiable, vous pouvez utiliser l'élément "dataliste". Dans HTML, utilisez la balise avec la balise en JavaScript, vous pouvez créer un élément de datalist à l'aide du «document.CreateElement ()"Méthode avec un tableau d'options qui seront ajoutées à la liste déroulante. Dans cet article de blog, nous avons démontré la procédure de création d'un combinaison modifiable en JavaScript ainsi que dans HTML.