Em HTML, fazes isto ao contrário: Você define uma entrada de texto e anexar um datalist a ele. (note the list attribute of the input).

<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>

Este link pode ajudá-lo: http://www.scriptol.com/html5/combobox.php

Tem dois exemplos. Um em html4 e outro em 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;
 }

O exemplo dojo aqui não funciona quando aplicado ao código existente na maioria dos casos. Por isso, tive de encontrar um alternativo, encontrado aqui - hxxp://technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/ (agora aponta para um site de spam ou pior)

Archive.org (não muito útil)

Ver o código em: https://github.com/kofifus/Combo

(o código baseia-se no padrão de classes de https://github.com/kofifus/New)

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>

Verifique os problemas para a modificação para adicionar um downarrow. https://github.com/Fyrd/purejs-datalist-polyfill/issues

A minha solução é muito simples, parece-se exactamente com um combobox nativo editável e ainda funciona mesmo no IE6 (algumas respostas aqui requerem um monte de código ou bibliotecas externas e o resultado é assim, por exemplo, o texto no textbox vai por trás do ícone da parte do combobox ou não se parece com um combobox editável de todo).

O ponto é clipar a combobox apenas o ícone da lista para ficar visível por cima da caixa de texto. E a caixa de texto é larga um pouco por baixo da parte do combobox, então você não vê seu final direito - visualmente continua com a combobox: 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>

(usado originalmente, por exemplo, aqui, mas não envie o formulário: old.dlubal.com/WishedFeatures.aspx )

Editar: os estilos precisam de ser um pouco diferentes para os macOS: O Ch está bem, para que o FF aumente a altura do combobox, o Safari e o Opera ignorem a altura do combobox, de modo a aumentar o seu tamanho de letra (tem um limite superior, de modo a diminuir um pouco a altura do textbox): https://i.stack.imgur.com/efQ9i.png

Dado que a marca HTML datalist ainda não é totalmente suportada, uma abordagem alternativa que eu usei é a caixa de ferramentas Dojo Toolkit . Era mais fácil implementar e documentar melhor do que outras opções que explorei. Também funciona bem com os quadros existentes. No meu caso, adicionei este combobox a um site existente que é baseado no Codeigniter e Bootstrap sem problemas que você só precisa ter certeza de aplicar o tema Dojo (por exemplo, classe="claro") para o elemento pai da combo em vez da etiqueta do corpo para evitar conflitos de estilo.

Primeiro, incluir o CSS para um dos temas do Dojo (como 'Claro'). É importante que o arquivo CSS seja incluído antes dos arquivos JS abaixo.

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

A seguir, inclui o jQuery e o Toolkit do Dojo 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>

Em seguida, você pode apenas seguir o código de exemplo dojo ou usar a amostra abaixo para obter uma lista de trabalho.

<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>

Olha para a ComboBox ou Combo neste 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>