带有输入条目选项的HTML组合框

时间：2013-01-30 22:03:47

标签： html combobox

除了选择列表中已有的值之外，我还可以输入组合框。但是，我似乎无法找到有关如何执行此操作的信息。我需要添加一个属性来允许输入文本吗？

11 个答案:

答案 0 :(得分：80)

在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元素

datalist元素旨在为此概念提供更好的机制。重要的是，它在Safari，iOS Safari或Opera Mini中不受支持。 Internet Explorer实现也存在一些问题。此信息将过期，因此请查看Can I Use to see current datalist support以获取最新信息。

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
  <option value="A">  
  <option value="B">
</datalist>

答案 1 :(得分：55)

在HTML中，您可以向后执行此操作： 您可以定义文本输入并将数据列表附加到其中。 （注意输入的list属性）。

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：21)

此链接可以帮助您： 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;
 }

答案 3 :(得分：6)

此处的dojo示例在大多数情况下应用于现有代码时不起作用。因此，我必须找到一个替代品，在这里找到 - hxxp：//technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/（现在指向垃圾网站或更糟）

archive.org（不太有用）

这是jsfiddle - https://jsfiddle.net/ze7fgby7/

答案 4 :(得分：4)

嗯，这是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>

答案 5 :(得分：2)

这个小得多，不需要jquery，在safari中效果更好。 https://github.com/Fyrd/purejs-datalist-polyfill/

检查修改的问题以添加downarrow。 https://github.com/Fyrd/purejs-datalist-polyfill/issues

答案 6 :(得分：2)

我的解决方案非常简单，看起来就像一个原生的可编辑组合框，但即使在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

答案 7 :(得分：1)

鉴于仍未完全支持HTML datalist标记，我使用的替代方法是Dojo Toolkit ComboBox。与我探索过的其他选项相比，它更易于实施和更好地记录。它还可以很好地与现有框架配合使用。在我的例子中，我将这个组合框添加到一个基于Codeigniter和Bootstrap的现有网站，没有问题你只需要确保将Dojo主题（例如class =“claro”）应用于组合的父元素而不是body标签避免造型冲突。

首先，包含一个Dojo主题的CSS（例如'Claro'）。在下面的JS文件之前包含CSS文件非常重要。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dijit/themes/claro/claro.css" />

接下来，通过CDN包含jQuery和Dojo Toolkit 

<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's sample code或使用下面的示例即可获得有效的组合框。

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

答案 8 :(得分：0)

其他答案都没有令人满意，主要是因为UI看起来仍然很糟糕。我发现this看起来不错，非常接近完美且可自定义。

示例和选项等的完整列表可以在here中找到，但这是一个基本演示：

$('#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>

答案 9 :(得分：-1)

在此网站上查看ComboBox或Combo：http://www.jeasyui.com/documentation/index.php#

答案 10 :(得分：-2)

    <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

...谢谢：）

相关问题
最新问题