【问题标题】：HTML combo box with option to type an entry带有输入条目选项的 HTML 组合框
【发布时间】：2013-01-30 22:03:46
【问题描述】：

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

【问题讨论】：

不，如果没有某种 JavaScript 或其他魔法，您将无法做到这一点。 <select> 元素本身无法做到这一点。
谢谢。也许我会寻找一个jQuery控件。
如果您认为 HTML5 list 属性可以解决问题，请考虑接受changing 的答案。
我意识到这是几年前的事了，但我仍然感到困惑。您使用什么代码来创建据称是组合框的东西？
@Stewart - 推测：OP 的措辞暗示 dropdown 与 combo box 的概念模糊。大概使用了<select> 和<option>，并从选择的空白选项开始。这有一个值列表，并且“看起来像一个组合框”；它只是缺乏输入文本区域的能力。

【解决方案1】：

在datalist 之前（请参阅下面的注释），您将提供一个额外的input 元素供人们输入他们自己的选项。

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

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

此机制适用于所有浏览器，无需 JavaScript。

如果选择了“其他”选项，您可以使用一点 JavaScript 来巧妙地仅显示 input。

数据列表元素

datalist 元素旨在为此概念提供更好的机制。在某些浏览器中，例如iOS Safari Check the Can I Use page to see current datalist support.

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

【讨论】：

老派但实用。
（Windows 上的 Chrome，当前版本）请注意，一旦用户开始在文本框中输入内容，该文本就会成为下拉列表中显示项目的过滤器。 一个不可接受的陷阱：一旦选择了一个项目，该选择就会成为过滤器！在代码 sn-p 中选择“A”。现在再次打开下拉菜单：仅“A”显示为选项！这不是组合框的工作方式；它按原样没有用。 AFAIK，解决此问题需要 JS 在打开下拉菜单时清除文本区域。（这里所有其他“数据列表”答案都有同样的致命缺陷，AFAIK。）
...如果不清楚，我将根据datalist 对第二种解决方案发表评论。

【解决方案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>

【讨论】：

Safari 不支持此功能。
你是对的，但是我认为它会在不久的将来得到支持，因为它是 HTML5 标准的一部分（目前是候选）。 w3.org/TR/2012/CR-html5-20121217
根据Can I Use，Safari 8 将不支持数据列表。 MDN 也是这么说的。
Safari 9 也没有。Apple 怎么了？
Safari 会如何降级？

【解决方案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/

【讨论】：

这适用于 Safari，与其他几乎所有产品不同。
这真是太棒了！.. 如果可以的话，我会给这 10 个赞。. 处理一切都非常完美..
不幸的是，该链接不再起作用（您知道新链接吗？），但是 jsfiddle 非常有用。
@Andre：抱歉，不知道新链接。希望 JSFiddle 能为您解决问题。

【解决方案5】：

现在是 2016 年，仍然没有简单的方法来进行组合...当然我们有数据列表，但没有 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>

【讨论】：

您好，您的代码剪辑器无法通过 StackOverflow 在 iOS 或 Edge 中运行。

【解决方案6】：

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

检查修改问题以添加向下箭头。 https://github.com/Fyrd/purejs-datalist-polyfill/issues

【讨论】：

【解决方案7】：

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

【讨论】：

这对我来说效果很好，不用担心浏览器的差异

【解决方案8】：

鉴于仍未完全支持 HTML datalist 标记，我使用的另一种方法是 Dojo Toolkit ComboBox。与我探索过的其他选项相比，它更容易实现并且记录得更好。它还可以很好地与现有框架配合使用。就我而言，我将此组合框添加到基于 Codeigniter 和 Bootstrap 的现有网站中，没有任何问题您只需确保将 Dojo 主题（例如 class="claro"）应用于组合的父元素而不是 body 标签以避免样式冲突。

首先，包含一个 Dojo 主题（例如“Claro”）的 CSS。在下面的 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>

【讨论】：

【解决方案9】：

其他答案都不令人满意，主要是因为 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>

【讨论】：

@maqs 当我找到这个库时，我环顾四周，没有其他库或解决方案中的完整解决方案运行良好并且看起来相同，无论平台。在一些常见的平台上，许多解决方案看起来非常糟糕。
@maqs 之所以不那么简单的任务是因为 HTML 不支持开箱即用，因此从外观到功能再到事件处理和配置的各个方面都有被组合在一起以解决 HTML 的限制。

【解决方案10】：

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

【讨论】：

这不是真正的组合框，因为您无法添加新数据。
该页面上的组合比标准的 html 选择差。

【解决方案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>

谢谢...:)

【讨论】：

包含一些细节或解释为什么你的答案有效总是一个好主意。
虽然这段代码 sn-p 可以解决问题，including an explanation 确实有助于提高您的帖子质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性 cmets 挤满你的代码，因为这会降低代码和解释的可读性！