У меня создалось впечатление, что вы можете вводить текст в поле со списком помимо выбора любых значений, уже имеющихся в списке. Однако я не могу найти информацию о том, как это сделать. Есть ли свойство, которое мне нужно добавить к нему, чтобы разрешить ввод текста?

Раньше datalist(см. Примечание ниже) вы должны были предоставить дополнительный inputэлемент, чтобы люди могли ввести свой вариант.

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

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

Этот механизм работает во всех браузерах и не требует JavaScript .

Вы можете использовать небольшой JavaScript, чтобы показать, только inputесли выбрана опция «Другое».

Элемент datalist

Этот datalistэлемент призван обеспечить лучший механизм реализации этой концепции. В некоторых браузерах, например iOS Safari <12.2, это не поддерживалось или при реализации были проблемы. Проверьте страницу Могу ли я использовать, чтобы увидеть текущую поддержку списка данных .

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

в HTML вы делаете это наоборот: вы определяете ввод текста:

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

Эта ссылка может вам помочь: http://www.scriptol.com/html5/combobox.php

У вас есть два примера. Один в html4, а другой в 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;
 }

В dojo здесь пример в большинстве случаев не работает при применении к существующему коду. Поэтому мне пришлось найти альтернативу, найденную здесь - hxxp: //technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/ (теперь указывает на спам-сайт или хуже )

archive.org (не очень полезно)

Вот jsfiddle - https://jsfiddle.net/ze7fgby7/

Что ж, сейчас 2016 год, и до сих пор нет простого способа сделать комбо ... конечно, у нас есть список данных, но без поддержки сафари / ios его действительно нельзя использовать. По крайней мере, у нас есть ES6. Ниже представлена ​​попытка создания комбо-класса, который обертывает div или span, превращая его в комбо, помещая поле ввода поверх select и привязывая соответствующие события.

см. код по адресу: https://github.com/kofifus/Combo

(код основан на шаблоне класса с https://github.com/kofifus/New )

Создать комбо очень просто! просто передайте div конструктору:

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>

Этот намного меньше, не требует jquery и лучше работает в сафари. https://github.com/Fyrd/purejs-datalist-polyfill/

Отметьте проблемы для модификации, чтобы добавить стрелку вниз. https://github.com/Fyrd/purejs-datalist-polyfill/issues

Мое решение очень простое, выглядит точно как родное редактируемое поле со списком и все же работает даже в IE6 (некоторые ответы здесь требуют большого количества кода или внешних библиотек, и результат таков, например, текст в текстовом поле находится за выпадающим значком часть поля со списком или он вообще не похож на редактируемое поле со списком).

Дело в том, чтобы вырезать из поля со списком только значок раскрывающегося списка, который будет виден над текстовым полем. И текстовое поле немного шире под частью поля со списком, поэтому вы не видите его правый конец - визуально продолжается со списком: 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>

(Используется изначально, например, здесь, но не отправляйте форму: old.dlubal.com/WishedFeatures.aspx)

РЕДАКТИРОВАТЬ: стили должны быть немного разными для macOS: Ch ​​в порядке, для FF увеличить высоту поля со списком, Safari и Opera игнорируют высоту поля со списком, поэтому увеличьте размер шрифта (имеет верхний предел, поэтому уменьшите текстовое поле '' высота немного): https://i.stack.imgur.com/efQ9i.png

Учитывая, что тег HTML datalist до сих пор полностью не поддерживается, я использовал альтернативный подход - Dojo Toolkit ComboBox. . Это было проще реализовать и лучше задокументировать, чем другие варианты, которые я изучал. Он также хорошо работает с существующими фреймворками. В моем случае я без проблем добавил это поле со списком к существующему веб-сайту, основанному на Codeigniter и Bootstrap. Вам просто нужно обязательно применить тему Dojo (например, class = "correo") к родительскому элементу комбо вместо тега body. чтобы избежать конфликтов стилей.

Во-первых, включите CSS для одной из тем Dojo (например, «Claro»). Важно, чтобы файл CSS был включен до файлов JS ниже.

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

Затем подключите jQuery и Dojo Toolkit через 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>

Затем вы можете просто следовать образцу кода Dojo или использовать образец ниже, чтобы получить работающее поле со списком.

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

Посмотрите ComboBox или Combo на этом сайте: 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>

Благодаря...:)

Ни один из других ответов не был удовлетворительным, в основном потому, что пользовательский интерфейс все еще выглядит плохо. Я нашел это , которое выглядит хорошо и очень близко к совершенству, а также настраивается.

Полный список примеров и вариантов можно найти здесь , но вот базовая демонстрация:

$('#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>