Créer une liste de sélection éditable

Par défaut, une zone <select> n'est pas éditable. Pour obtenir cette fonctionnalité, et ainsi pouvoir rajouter une entrée "à la volée" dans une liste de sélection, nous allons combiner un <select> avec un <input>.

La zone <input> va être affiché par dessus le select. Ce dernier sera un peu plus large pour permettre d'afficher la flèche basse. Un peu de Jquery permettra de forcer la valeur dans la zone input avec le contenu du select.

Code CSS :

.selectEdit {

    position: absolute;

    width: 450px;

    height: 23px;

    border: 0;

}

.inputEdit {

    position: absolute;

    width: 430px ;

    height: 17px;

}

Notez le fait que la hauteur de inputEdit est un peu plus faible que le select, et sa largeur réduite de 20 px.

Code Html :

<script>

$(document).ready(function() {

    $(".selectEdit").change( function () {

        $(this).next(".inputEdit").val($(this).val());

    } );

} );

</script>

<form ...>

<select class="selectEdit" title="Langage employé">

<option value="">Choisissez une valeur déjà existante, ou créez-en une nouvelle</option>

<option value="fr">fr</option>

<option value="en">en</option>

</select>

<input class="inputEdit" name="language" title="Langage employé">

...

Le champ input doit suivre le champ select pour que le code Jquery fasse son office; La première option est nécessaire pour que la première "vraie" valeur du select puisse être sélectionnée.

L'utilisation des classes permet de rendre le code générique : vous pouvez rajouter autant de select éditables que nécessaire dans votre page.

Ce code a été établi à partir de celui présenté ici : http://ughzoid.wordpress.com/2013/01/19/jquery-html-select-element-with-editable-input-field/