Combo box en HTML 5 et équivalent HTML 4

HTML 5 parmi les nouveaux objets de formulaire, inclut la combobox qui permet de remplir un champ de texte selon les options présentées dans une liste déroulante.

On peut réaliser l'équivalent en HTML 4 avec deux fonctions JavaScript.

Combobox en HTML 5

Syntaxe:

<input type=text list=browsers >
<datalist id=browsers >
   <option> Google
   <option> IE9
</datalist>

Pour créer une combobox, on associe une datalist à un champ de texte général ou spécialisé.

Les attributs qui décrivent la combobox sont les attributs respectifs de <input> et <datalist>.

L'équivalent en HTML 4

En réunissant un champ de texte et une liste déroulante HTML 4 peut produire l'objet équivalent mais avec du code JavaScript ajouté.

La fonction JavaScript onChange permet de détecter le choix par l'utilisateur d'une option.
Reste alors à transférer la valeur choisie dans le champ de texte.

Code HTML:

<input type="text" id="theinput" name="theinput" />
<select name="thelist" onChange="combo(this, 'theinput')">
  <option>un</option>
  <option>deux</option>
  <option>trois</option>
</select> 

Lecture de la la liste en JavaScript:

var idx = thelist.selectedIndex;
var content = thelist.options[idx].innerHTML;

Si on avait assigné des valeurs aux options l'instruction aurait été plutôt:

var content = thelist.options[idx].value;  

Affecter la valeur au champ de texte, l'identificateur du champ de texte ayant été donné par l'appel à la fonction combo.

theinput = document.getElementById(theinput);  
theinput.value = content;

La fonction JavaScript complète:

function combo(thelist, theinput)
{
  theinput = document.getElementById(theinput);  
  var idx = thelist.selectedIndex;
  var content = thelist.options[idx].innerHTML;
  theinput.value = content;	
}

Ce code est suffisant pour transmettre le choix d'une option dans le champ de texte mais comporte une lacune. La fonction onChange ne fonctionne que si l'option choisie différe de l'option affichée, autrement dit, si l'utilisateur veut choisir la première option de la liste (ou l'option par défaut), onChange devient inopérant puisque l'utilisateur ne change rien.
Dans ce cas on ne peut récupérer la valeur et la transmettre.

Pour remédier à cela, une deuxième fonction est ajoutée, comboInit.

Elle est associée à l'évènement onMouseOut. Quand l'utilisateur affiche la liste, la première option est transférée dans le champ de texte. Il peut ensuite choisir une option différente s'il le veut.

Cela ne fonctionne que quand le champ de texte est vide puis seule onChange deviendra effectif.

Le code HTML:

<select name="thelist" 
   onChange="combo(this, 'theinput')" 
   onMouseOut="comboInit(this, 'theinput')" > 

La seconde fonction:

function comboInit(thelist)
{
  theinput = document.getElementById(theinput);  
  var idx = thelist.selectedIndex;
  var content = thelist.options[idx].innerHTML;
  if(theinput.value == "")
    theinput.value = content;	
}

Pour une démonstration complète

Widget Combo box

un deux trois

Code HTML

Incorporons au formulaire un champ de texte et une liste déroulante :

<input type="text" id="theinput" name="theinput" />
<select name="thelist" onChange="combo(this, 'theinput')" onMouseOut="comboInit(this, 'theinput')" >
  <option>un</option>
  <option>deux</option>
  <option>trois</option>
</select>

Code JavaScript

La premère fonction, comboInit agit au départ quand le champ de texte est vide. Elle assigne la valeur par défaut ou la première ligne de la liste.
La seconde fonction, combo agit quand l'utilisateur sélectionne une ligne dans la liste déroulante.

function comboInit(thelist)
{
  theinput = document.getElementById(theinput);  
  var idx = thelist.selectedIndex;
  var content = thelist.options[idx].innerHTML;
  if(theinput.value == "")
    theinput.value = content;	
}

function combo(thelist, theinput)
{
  theinput = document.getElementById(theinput);  
  var idx = thelist.selectedIndex;
  var content = thelist.options[idx].innerHTML;
  theinput.value = content;	
}

Le code peut être recopié ci-dessus pour vos applications ou repris dans la source de cette page (tout ce qui est dans le fieldset). Les noms thelist qui désigne la liste déroulante et theinput qui désigne le champ de texte peuvent être changés.

© 2010-2022 Scriptol.fr