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

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

Вы можете выполнить это, используя тег <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 6

Немного CSS, и вы сделали fiddle

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

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

ComboBox with TextBox (Click Here)

Answer 8

Очень простая реализация (только базовые функции) на основе 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> 

Обратите внимание: использует previousElementSibling, который не поддерживается in older browsers (below 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 9

Это может быть достигнуто с помощью простой 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>