У мене склалося враження, що ви можете ввести в поле зі списком, крім того, щоб вибрати будь-які значення, що вже є у списку. Однак я не можу знайти інформацію про те, як це зробити. Чи потрібно до нього додати властивість, щоб дозволити друкувати текст?

Раніше 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Елемент призначений для забезпечення кращого механізму цієї концепції. У деяких веб-переглядачах, наприклад 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 досі не підтримується повністю, альтернативним підходом, який я використав, є Dojo Toolkit ComboBox . Це було легше реалізувати та краще задокументовано, ніж інші варіанти, які я досліджував. Він також чудово грає з існуючими фреймворками. У моєму випадку я додав цей комбобокс до існуючого веб-сайту, який базується на Codeigniter та Bootstrap без проблем. Просто потрібно обов’язково застосувати тему Dojo (наприклад, class = "claro") до батьківського елемента комбо замість тегу 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>

Далі ви можете просто слідувати зразку коду Доджо або скористатися зразком нижче, щоб отримати працюючий комбобокс.

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