Комбинированный HTML-код с возможностью ввода записи

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

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

Эта ссылка может помочь вам: 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;
 }

Ответ 4

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

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

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

Ответ 5

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

см. код по адресу: 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>

Ответ 6

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

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

Ответ 7

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

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

EDIT: стили должны быть немного разными для macOS: Ch в порядке, поскольку FF увеличивает высоту combobox, Safari и Opera игнорируют высоту combobox, поэтому увеличивают их размер шрифта (имеет верхний предел, а затем уменьшают текстовое поле "высота бит" ): https://i.stack.imgur.com/efQ9i.png

Ответ 8

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

Сначала включите 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 Инструментарий через 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>

Ответ 9

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

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

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

Ответ 10

Посмотрите ComboBox или Combo на этом сайте: http://www.jeasyui.com/documentation/index.php#

Ответ 11

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

Спасибо...:)