Как я могу создать редактируемый выпадающий список в HTML?

Question

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

Есть ли стандартный виджет или мне нужно использовать сторонний javascript?

Как насчет переносимости браузера?

Answer 1

Это можно сделать с помощью тега <datalist> в HTML5.

<input type="text" name="product" list="productName"/>
<datalist id="productName">
    <option value="Pen">Pen</option>
    <option value="Pencil">Pencil</option>
    <option value="Paper">Paper</option>
</datalist>

Если дважды щелкнуть вводимый текст в браузере, появится список с определенной опцией.

Answer 2

Этого можно достичь с помощью простого HTML, CSS и JQuery. Я создал образец страницы:

$(document).ready(function(){
   
    $(".editableBox").change(function(){         
        $(".timeTextBox").val($(".editableBox option:selected").html());
    });
});

.editableBox {
    width: 75px;
    height: 30px;
}

.timeTextBox {
    width: 54px;
    margin-left: -78px;
    height: 25px;
    border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <select class="editableBox">        
        <option value="1">01:00</option>
        <option value="2">02:00</option>
        <option value="3">03:00</option>
        <option value="4">04:00</option>
        <option value="5">05:00</option>
        <option value="6">06:00</option>
        <option value="7">07:00</option>
        <option value="8">08:00</option>
        <option value="9">09:00</option>
        <option value="10">10:00</option>
        <option value="11">11:00</option>
        <option value="12">12:00</option>
        <option value="13">13:00</option>
        <option value="14">14:00</option>
        <option value="15">15:00</option>
        <option value="16">16:00</option>
        <option value="17">17:00</option>
        <option value="18">18:00</option>
        <option value="19">19:00</option>
        <option value="20">20:00</option>
        <option value="21">21:00</option>
        <option value="22">22:00</option>
        <option value="23">23:00</option>
        <option value="24">24:00</option>
    </select>
    <input class="timeTextBox" name="timebox" maxlength="5"/>
</div>

Answer 3

Лучший способ сделать это, вероятно, использовать стороннюю библиотеку.

Существует реализация того, что вы ищете в jQuery UI и в dojo . jQuery более популярен, но dojo позволяет декларативно определять виджеты в HTML, что больше похоже на то, что вы ищете.

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

Answer 4

Тег <select> позволяет использовать только предопределенные записи. Типичное решение вашей проблемы - иметь одну запись с пометкой «Другое» и отключенное поле редактирования (<input type="text"). Добавьте немного JavaScript, чтобы включить поле редактирования, только когда выбрано «Другое».

Может быть возможно создать раскрывающийся список, который позволяет прямое редактирование, но IMO не стоит усилий. Если бы это было, Amazon, Google или Microsoft сделали бы это ;-) Просто выполни работу с помощью наименее сложного решения. Это как быстрее (ваш босс может понравиться) и, как правило, легче поддерживать (вам может понравиться).

Answer 5

Очень простая реализация (только базовая функциональность) на основе CSS и одной строки кода JS

<div class="dropdown">
    <input type="text" />
    <select  onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()">
        <option>This is option 1</option>
        <option>Option 2</option>
    </select>
</div>

Обратите внимание: используется предыдущий элемент элемента, который не поддерживается в старых браузерах (ниже IE9)

.dropdown {
    position: relative;
    width: 200px;
}
.dropdown select
{
    width: 100%;
}
.dropdown > * {
    box-sizing: border-box;
    height: 1.5em;
}
.dropdown select {
}
.dropdown input {
    position: absolute;
    width: calc(100% - 20px);
}

Вот оно JSFiddle

Answer 6

ComboBox с TextBox (для предварительно определенных значений, а также пользовательских значений.)

ComboBox с TextBox (нажмите здесь)

Answer 7

Немного CSS и все готово скрипка

<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv">
<input name="filterTextField" type="text" id="filterTextField" tabindex="2"  style="width: 140px;
    position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" />
        <div style="position: absolute;" id="filterDropdownDiv">
<select name="filterDropDown" id="filterDropDown" tabindex="1000"
    onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute;
    top: 0px; left: 0px; z-index: 1; width: 165px;">
    <option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option>
</select>

Answer 8

К сожалению, поле со списком было исключено из спецификаций HTML.

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

Answer 9

Я не уверен, что есть способ сделать это автоматически без JavaScript.

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

Кроме того, убедитесь, что у вас есть альтернативные средства (то есть кнопка отправки) для тех, у кого отключен JavaScript.

Хороший пример: Combo-Box Viewer

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