HTML поле со списком с возможностью ввода записи

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

3212   10  

10 ответов:

до 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">

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

вы могли бы использовать немного JavaScript, чтобы быть умными, только показывает input если была выбрана опция "другое".

элемент datalist

The datalist элемент предназначен для обеспечения лучшего механизма для этого концепция. Важно отметить, что он не имеет поддержки в Safari, iOS Safari или Opera Mini. Реализация Internet Explorer также имеет некоторые проблемы. Эта информация устареет, поэтому проверьте могу ли я использовать, чтобы увидеть текущую поддержку datalist для более свежей информации.

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
    <option value="A">
    <option value="B">
</datalist>
70  
2015-07-11 20:52:19

в HTML, вы делаете это в обратном направлении: Вы определяете ввод текста и прикрепляете к нему datalist. (обратите внимание на атрибут списка ввода).

<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>
47  
2018-07-13 04:00:07

эта ссылка может помочь вам: 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;
 }
19  
2018-06-29 09:40:09

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

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

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

6  
2017-11-15 21:03:16

Ну это 2016 год, и до сих пор нет простого способа сделать комбо ... конечно, у нас есть datalist, но без поддержки safari/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>
4  
2016-10-07 01:37:20

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

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

2  
2017-01-11 02:29:53

мое решение очень простое, выглядит точно как родной редактируемый combobox и все же работает даже в IE6 (некоторые ответы здесь требуют много кода или внешних библиотек, и результат таков, например, текст в текстовом поле идет за выпадающим значком части combobox или он вообще не похож на редактируемый 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, поэтому увеличьте размер шрифта (имеет верхний предел, поэтому затем уменьшите высоту текстового поля a бит): https://i.stack.imgur.com/efQ9i.png

2  
2017-04-08 01:48:52

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

во-первых, включите 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>

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

<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>
1  
2015-04-14 10:32:47

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

-1  
2013-01-31 00:09:50 
    <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>

Click to see OutPut Screen

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

-2  
2016-08-09 20:18:14

Comments

    Ничего не найдено.
Click here to cancel reply.