Tenía la impresión de que podía escribir en un cuadro combinado además de seleccionar cualquier valor que ya estuviera en la lista. Sin embargo, parece que no puedo encontrar información sobre cómo hacer esto. ¿Hay alguna propiedad que deba agregar para permitir escribir texto?

Antes datalist(consulte la nota a continuación), proporcionaría un inputelemento adicional para que las personas escribieran su propia opción.

<select name="example">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="-">Other</option>
</select>

<input type="text" name="other">

Este mecanismo funciona en todos los navegadores y no requiere JavaScript .

Puede usar un poco de JavaScript para ser inteligente y mostrar solo el input si se selecciona la opción "Otro".

elemento de lista de datos

El datalistelemento está destinado a proporcionar un mejor mecanismo para este concepto. En algunos navegadores, por ejemplo, iOS Safari <12.2, esto no fue compatible o la implementación tuvo problemas. Consulte la página ¿Puedo usar para ver el soporte actual de la lista de datos ?

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
  <option value="A">  
  <option value="B">
</datalist>

en HTML, lo hace al revés: define una entrada de texto:

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

y adjuntarle un datalist. (tenga en cuenta el atributo de lista de la entrada).

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

Este enlace puede ayudarlo: http://www.scriptol.com/html5/combobox.php

Tienes dos ejemplos. Uno en html4 y otro 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;
 }

El dojoejemplo aquí no funciona cuando se aplica al código existente en la mayoría de los casos. Por lo tanto, tuve que encontrar una alternativa, que se encuentra aquí: hxxp: //technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/ (ahora apunta a un sitio de spam o peor )

archive.org (no muy útil)

Aquí está el jsfiddle - https://jsfiddle.net/ze7fgby7/

Bueno, es 2016 y todavía no hay una manera fácil de hacer un combo ... seguro que tenemos una lista de datos, pero sin el soporte de safari / ios no es realmente utilizable. Al menos tenemos ES6 ... a continuación hay un intento de una clase combinada que envuelve un div o span, convirtiéndolo en un combo colocando un cuadro de entrada encima de select y vinculando los eventos relevantes.

ver el código en: https://github.com/kofifus/Combo

(el código se basa en el patrón de clase de https://github.com/kofifus/New )

¡Crear un combo es fácil! simplemente pase un div a su constructor:

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>

Este es mucho más pequeño, no requiere jquery y funciona mejor en safari. https://github.com/Fyrd/purejs-datalist-polyfill/

Compruebe los problemas de la modificación para agregar una flecha hacia abajo. https://github.com/Fyrd/purejs-datalist-polyfill/issues

Mi solución es muy simple, se ve exactamente como un cuadro combinado editable nativo y, sin embargo, funciona incluso en IE6 (algunas respuestas aquí requieren mucho código o bibliotecas externas y el resultado es así, por ejemplo, el texto en el cuadro de texto va detrás del ícono desplegable de la parte del cuadro combinado o no parece un cuadro combinado editable en absoluto).

El punto es recortar el cuadro combinado solo el icono desplegable para que sea visible encima del cuadro de texto. Y el cuadro de texto es un poco ancho debajo de la parte del cuadro combinado, por lo que no ve su extremo derecho; visualmente continúa con el cuadro combinado: 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 ejemplo, aquí, pero no envíe el formulario: old.dlubal.com/WishedFeatures.aspx)

EDITAR: Los estilos deben ser un poco diferentes para macOS: Ch ​​está bien, para FF, aumente la altura del cuadro combinado, Safari y Opera ignoran la altura del cuadro combinado, así que aumente su tamaño de fuente (tiene un límite superior, entonces disminuya el cuadro de texto) altura un poco): https://i.stack.imgur.com/efQ9i.png

Dado que la etiqueta de lista de datos HTML todavía no es totalmente compatible, un enfoque alternativo que utilicé es el Dojo Toolkit ComboBox . Fue más fácil de implementar y mejor documentado que otras opciones que he explorado. También funciona muy bien con los marcos existentes. En mi caso, agregué este cuadro combinado a un sitio web existente que se basa en Codeigniter y Bootstrap sin problemas. Solo debe asegurarse de aplicar el tema Dojo (por ejemplo, class = "claro") al elemento principal del combo en lugar de la etiqueta del cuerpo para evitar conflictos de estilo.

Primero, incluya el CSS para uno de los temas de Dojo (como 'Claro'). Es importante que el archivo CSS se incluya antes que los archivos JS a continuación.

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

A continuación, incluya jQuery y Dojo Toolkit a través de 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>

A continuación, puede seguir el código de muestra de Dojo o usar la muestra a continuación para obtener un cuadro combinado que funcione.

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

Mire ComboBox o Combo en este sitio: 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>

Gracias...:)

Ninguna de las otras respuestas fue satisfactoria, en gran parte porque la interfaz de usuario todavía se ve mal. Encontré esto , que se ve bien y está muy cerca de ser perfecto y personalizable.

Aquí puede encontrar una lista completa de ejemplos y opciones , pero aquí hay una demostración básica:

$('#editable-select').editableSelect();

<link href="https://cdn.jsdelivr.net/npm/jquery-editable-select@2.2.5/dist/jquery-editable-select.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-editable-select@2.2.5/dist/jquery-editable-select.min.js"></script>

<select id="editable-select">
	<option>Alfa Romeo</option>
	<option>Audi</option>
	<option>BMW</option>
	<option>Citroen</option>
</select>