Hey, hey !

Pour bien commencer ce blog d’un geek (c’est important de le préciser, vous ne me connaissez pas encore), rien de tel qu’un petit post sur le développement web…

Il y a quelque temps, on m’a demandé d’afficher une combo-box dans une BSP (Business Server Page, made in SAP, grosso modo l’équivalent d’une page web générée en PHP mais ici en ABAP [langage de programmation propriétaire SAP]).
Il m’a fallu dans un premier temps découvrir ce qu’on entendait par combo-box. Une recherche sur le Net.
Wikipedia donne la bonne définition que je cherchais : Combo-box [en].

Par contre, en HTML, cet élément (sauf erreur de ma part, dans ce cas corrigez moi) n’existe pas. Une rapide nouvelle recherche sur le Net m’a révélé que ce terme « combo box » était utilisé à la place de « liste déroulante » ou list box comme je dirais en anglais.J’ai donc été obligé de réfléchir ! En pas longtemps, une solution m’est apparue. La combo box étant la combinaison d’une zone de texte et d’une liste déroulante, je me suis dit : superposons une liste déroulante sur une zone de texte. Avec une subtilité : sous Internet Explorer (eh oui, toujours le même…), la liste déroulante est au-dessus de tous les autres éléments HTML. Du coup, pour mettre la zone de texte en avant-plan, j’étais face à un problème.

La solution : l’élément HTML IFRAME qui lui peut être au-dessus de la liste déroulante.

Donc le principe :

• L’HTML définit une DIV globale dans laquelle on met l’IFRAME, l’INPUT texte puis le SELECT
• En CSS, on définit la DIV globale en relative pour pouvoir positionner les autres éléments en absolu dans cette DIV. Il faut positionner la zone de texte au-dessus de la liste déroulante avec la même taille que cette dernière, en laissant dépasser la flèche pour voir les différentes options de la liste. L’IFRAME doit être positionnée de la même façon que la zone de texte, de façon à être strictement en dessous.
• En Javascript, ajouter un événement onChange sur la liste déroulante afin que lorsque l’utilisateur sélectionne une entrée, le contenu de celle-ci soit répercutée dans la zone de texte.
• C’est tout !

Cliquer pour visualiser le fichier exemple de combo-box.

Par contre, c’est fourni en l’état, pas d’optimisation inter navigateur par exemple. Aujourd’hui, ça ne rend bien que sous IE (oui, je sais, pas bien, mais appli pour le bureau donc…).