W HTML, robisz to od tyłu: Definiujesz wejście tekstu i dołączasz do niego datalist. (zwróć uwagę na atrybut list wejścia).

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

Ten link może Ci pomóc: http://www.scriptol.com/html5/combobox.php

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

Przykład dojo w większości przypadków nie działa, gdy jest stosowany do istniejącego kodu. Dlatego musiałem znaleźć alternatywę, znaleźć tutaj - hxxp://technologymantrablog.com / how-to-create-a-combo-box-with-text-input-jquery-autocomplete / (teraz wskazuje na spam lub gorzej)

Archive.org (niezbyt przydatne)

Oto jsfiddle - https://jsfiddle.net/ze7fgby7/

Jest rok 2016 i nadal nie ma łatwego sposobu na combo ... pewnie, że mamy datalist, ale bez obsługi safari/ios nie jest to naprawdę użyteczne. Przynajmniej mamy ES6 .. poniżej znajduje się próba użycia klasy combo, która owija div lub span, zamieniając ją w combo, umieszczając pole wprowadzania na górze select i wiążąc odpowiednie zdarzenia.

Zobacz kod na stronie: https://github.com/kofifus/Combo

(Kod opiera się na wzorze klasy z https://github.com/kofifus/New )

Tworzenie combo jest łatwe ! po prostu podaj div do konstruktora:

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>

Ten jest znacznie mniejszy, nie wymaga jquery i działa lepiej w safari. https://github.com/Fyrd/purejs-datalist-polyfill/

Sprawdź problemy z modyfikacją, aby dodać downarrow. https://github.com/Fyrd/purejs-datalist-polyfill/issues

Moje rozwiązanie jest bardzo proste, wygląda dokładnie jak natywny edytowalny combobox, a mimo to działa nawet w IE6(niektóre odpowiedzi wymagają dużo kodu lub zewnętrznych bibliotek, a wynik jest taki, np. tekst w textbox idzie za ikoną rozwijanej części combobox' lub nie wygląda jak edytowalny combobox w ogóle).

Chodzi o to, aby przyciąć combobox tylko ikonę rozwijaną, aby była widoczna nad polem tekstowym. A pole tekstowe jest szerokie trochę pod częścią combobox' , więc nie widzę jej prawego końca-wizualnie kontynuuje 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>

(używane pierwotnie np. tutaj, ale nie wysyłaj formularza: old.dlubal.com/WishedFeatures.aspx )

EDIT: style muszą być nieco inne dla macOS: Ch jest ok, dla FF zwiększ combobox' wysokość, Safari i Opera ignoruj ComboBox 'wysokość więc zwiększ ich rozmiar czcionki (ma górny limit, więc zmniejsz wysokość textbox' trochę): https://i.stack.imgur.com/efQ9i.png

Biorąc pod uwagę, że znacznik DataList HTML nadal nie jest w pełni obsługiwany, alternatywnym podejściem, którego użyłem, jest Dojo Toolkit ComboBox . Było łatwiejsze do wdrożenia i lepiej udokumentowane niż inne opcje, które zbadałem. Gra również dobrze z istniejącymi frameworkami. W moim przypadku dodałem ten combobox do istniejącej strony internetowej, która jest oparta na Codeigniter i Bootstrap bez żadnych problemów, wystarczy upewnić się, że zastosujesz motyw Dojo (np. class="claro") do elementu nadrzędnego combo body tag, aby uniknąć konfliktów stylizacji.

Najpierw Dołącz CSS dla jednego z motywów Dojo (takich jak 'Claro'). Ważne jest, aby plik CSS został dołączony przed poniższymi plikami JS.

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

Następnie dołącz jQuery i zestaw narzędzi Dojo przez 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>

Następnie możesz podążać za przykładowym kodem Dojo lub użyć poniższej próbki, aby uzyskać działający combobox.

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

Spójrz na ComboBox lub Combo na tej stronie: 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>