En HTML, vous le faites à l'envers: Vous définissez une entrée de texte et y attachez un datalist. (notez l'attribut list de l'entrée).

<input type="text" list="browsers" />

<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

Ce lien peut vous aider: http://www.scriptol.com/html5/combobox.php

Vous avez deux exemples. Un en html4 et l'autre en html5

HTML5

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

HTML4

 <input type="text" id="theinput" name="theinput" />
 <select name="thelist" onChange="combo(this, 'theinput')">
   <option>one</option>
   <option>two</option>
   <option>three</option>
 </select>

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

L'exemple dojo ici ne fonctionne pas lorsqu'il est appliqué au code existant dans la plupart des cas. Par conséquent, j'ai dû trouver une alternative, trouvée ici-hxxp: / / technologymantrablog. com / how-to-create-a-combo-box-with-text-input-jquery-autocomplete / (pointe maintenant vers un site de spam ou pire)

Archive.org (pas très utile)

Voici le jsfiddle - https://jsfiddle.net/ze7fgby7/

Eh bien, nous sommes en 2016 et il n'y a toujours pas de moyen facile de faire un combo ... bien sûr, nous avons datalist mais sans support safari / ios, ce n'est pas vraiment utilisable. Au moins, nous avons ES6 .. vous trouverez ci-dessous une tentative de classe combo qui enveloppe un div ou un span, le transformant en un combo en plaçant une zone de saisie au-dessus de select et en liant les événements pertinents.

Voir le code à: https://github.com/kofifus/Combo

(le code repose sur le modèle de classe de https://github.com/kofifus/New)

Créer un combo est facile ! il suffit de passer un div à son constructeur:

let mycombo=Combo.New(document.getElementById('myCombo'));
mycombo.options(['first', 'second', 'third']);

mycombo.onchange=function(e, combo) {
  let val=combo.value;
  // let val=this.value; // same as above
  alert(val);
 }

<script src="https://rawgit.com/kofifus/New/master/new.min.js"></script>
<script src="https://rawgit.com/kofifus/Combo/master/combo.min.js"></script>

<div id="myCombo" style="width:100px;height:20px;"></div>

Celui-ci est beaucoup plus petit, ne nécessite pas jquery et fonctionne mieux dans safari. https://github.com/Fyrd/purejs-datalist-polyfill/

Vérifiez les problèmes de la modification pour ajouter un downarrow. https://github.com/Fyrd/purejs-datalist-polyfill/issues

Ma solution est très simple, ressemble exactement à une combobox éditable native et fonctionne même dans IE6 (certaines réponses ici nécessitent beaucoup de code ou de bibliothèques externes et le résultat est tel, par exemple le texte dans la zone de texte passe derrière l'icône déroulante de la partie combobox ou il ne ressemble pas du tout à une combobox éditable).

Le but est de couper la liste déroulante uniquement l'icône de liste déroulante pour être visible au-dessus de la zone de texte. Et la zone de texte est large un peu sous la partie combobox, donc vous ne voyez pas son extrémité droite-continue visuellement avec la liste déroulante: https://jsfiddle.net/dLsx0c5y/2/

select#programmoduleselect
{
    clip: rect(auto auto auto 331px);
    width: 351px;
    height: 23px;
    z-index: 101; 
    position: absolute;
}

input#programmodule
{
    width: 328px;
    height: 17px;
}

<table><tr>
<th>Programm / Modul:</th>
<td>
    <select id="programmoduleselect"
        onchange="var textbox = document.getElementById('programmodule'); textbox.value = (this.selectedIndex == -1 ? '' : this.options[this.selectedIndex].value); textbox.select(); fireEvent2(textbox, 'change');"
        onclick="this.selectedIndex = -1;">
        <option value=RFEM>RFEM</option>
        <option value=RSTAB>RSTAB</option>
        <option value=STAHL>STAHL</option>
        <option value=BETON>BETON</option>
        <option value=BGDK>BGDK</option>
    </select>
    <input name="programmodule" id="programmodule" value="" autocomplete="off"
        onkeypress="if (event.keyCode == 13) return false;" />
</td>
</tr></table>

(utilisé à l'origine par exemple ici, mais n'envoyez pas le formulaire: old.dlubal.com/WishedFeatures.aspx )

EDIT: les styles doivent être un peu différents pour macOS: Ch est ok, pour FF augmenter la combobox 'height, Safari et Opera ignorer la combobox' height donc augmenter leur taille de police (a une limite supérieure, alors diminuez un peu la TextBox ' height): https://i.stack.imgur.com/efQ9i.png

Étant donné que la balise datalist HTML n'est toujours pas entièrement prise en charge, une autre approche que j'ai utilisée est la ComboBox Dojo Toolkit. C'était plus facile à mettre en œuvre et mieux documenté que d'autres options que j'ai explorées. Il joue également bien avec les cadres existants. Dans mon cas, j'ai ajouté cette liste déroulante à un site Web existant basé sur Codeigniter et Bootstrap sans aucun problème, vous devez juste être sûr d'appliquer le thème Dojo (par exemple class="claro") à l'élément parent du combo à la place de l'étiquette de corps pour éviter les conflits de style.

Tout d'abord, incluez le CSS pour l'un des thèmes du Dojo (comme 'Claro'). Il est important que le fichier CSS soit inclus avant les fichiers JS ci-dessous.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dijit/themes/claro/claro.css" />

Ensuite, incluez jQuery et Dojo Toolkit via CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>

Ensuite, vous pouvez simplement suivre l'exemple de code du Dojo ou utiliser l'exemple ci-dessous pour obtenir une liste déroulante fonctionnelle.

<body>
    <!-- Dojo Dijit ComboBox with 'Claro' theme -->
    <div class="claro"><input id="item_name_1" class=""/></div>

    <script type="text/javascript">
        $(document).ready(function () {
            //In this example, dataStore is simply an array of JSON-encoded id/name pairs
            dataStore = [{"id":"43","name":"Domain Name Renewal"},{"id":"42","name":"Hosting Renewal"}];

            require(
                [ "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"], 
                function (Memory, ComboBox) {
                    var stateStore = new Memory({
                        data: dataStore
                    });

                    var combo = new ComboBox({
                        id: "item_name_1",
                        name: "desc_1",
                        store: stateStore,
                        searchAttr: "name"},                        
                        "item_name_1"
                        ).startup();

                });

        });

    </script>
</body>

Regardez ComboBox ou Combo sur ce site: http://www.jeasyui.com/documentation/index.php#

    <html>
<head>
    <title></title>
    <script src="jquery-3.1.0.js"></script>
    <script>
        $(function () {
            $('#selectnumber').change(function(){
                alert('.val() = ' + $('#selectnumber').val() + '  AND  html() = ' + $('#selectnumber option:selected').html() + '  AND .text() = ' + $('#selectnumber option:selected').text());
            })
        });
    </script>
</head>
<body>
       <div>
        <select id="selectnumber">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
            <option value="4">four</option>
        </select>

    </div>
   </body>
</html>

Merci...:)