HTML组合框，带有用于键入条目的选项

82

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

html  combobox 
— 比德鲁斯
source
4
不，没有某种JavaScript或其他魔术，就无法做到这一点。<select>元素本身不能做到这一点。
— j08691 2013年
谢谢。也许我会寻找一个jQuery控件。
— birdus
如果您认为HTML5属性可以胜任，请考虑更改接受的答案list。
— laggingreflex 2015年
我意识到这是几年前的事，但我仍然感到困惑。您使用什么代码来创建据说是组合框的内容？
— 斯图尔特
@Stewart -投机：OP的措辞表明，概念模糊dropdown带combo box。大概<select>与一起使用<option>，并从选择空白选项开始。它具有一个值列表，并且“看起来像一个组合框”；它只是缺乏输入文本区域的能力。
— ToolmakerSteve

Answers:

113

在之前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。

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

数据列表元素

该datalist元素旨在为该概念提供更好的机制。在某些浏览器中，例如iOS Safari <12.2，不支持此功能或实现存在问题。检查“我可以使用”页面以查看当前数据列表支持。

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

— 芬顿
source
老派但实用。
— maqs
1
（Windows上的Chrome，当前版本）请注意，一旦用户开始在文本框中输入内容，该文本将成为下拉菜单中显示哪些项目的过滤器。令人无法接受的陷阱：一旦选择了一项，该选择便成为过滤器！在代码段中选择“ A”。现在再次打开下拉菜单：仅显示“ A”！这不是组合框的工作方式。它原样没有用。AFAIK，要解决此问题，需要JS在打开下拉菜单时清除文本区域。（这里所有其他“数据列表”答案都具有相同的致命缺陷，即AFAIK。）
— ToolmakerSteve
……如果不清楚，我将基于来评论第二种解决方案datalist。
— ToolmakerSteve
59

在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>
— 克里斯托夫·萨莱（KristófSzalay）
source
10
Safari不支持此功能。
— trpt4him 2014年
没错，但是我认为它会在不久的将来得到支持，因为它是HTML5标准的一部分（现在是候选人）。w3.org/TR/2012/CR-html5-20121217
— 克里斯托夫绍洛伊
2
根据我可以使用，Safari 8将不支持数据列表。 MDN表示相同。
— 达伦·格里菲斯
2
Safari 9也没有。苹果公司怎么了？
— 山姆·沃什伯恩
3
Safari如何降低这种性能？
— William Entriken '18
22

该链接可以帮助您： 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;
 }
— 塞尔索·苏亚雷斯
source
6
尽管此链接可以回答问题，但最好在此处包括答案的基本部分，并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会无效。
— 乔尔
6

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

archive.org（不是很有用）

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

— 柠檬汁
source
1
它可以与Safari一起使用，与几乎其他所有功能都不一样。
— Atte Juvonen
1
这太该死的了不起的人！..如果可以的话，我会给这10张赞成票。.一切都
— 做得
1
不幸的是，该链接不再起作用（您知道一个新的链接吗？），但是jsfiddle非常有用。
— 安德烈（Andre）
@Andre：对不起，不知道新链接。希望JSFiddle将为您解决问题。
— 柠檬汁
4

好吧，这是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>
展开摘要

— 科菲弗斯
source
嗨，您的代码截取器无法通过StackOverflow在iOS或Edge中运行。
— 柠檬汁
3

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

— 拉迪斯拉夫·齐玛
source
这对我来说非常有效，无需担心浏览器的差异
— cycle4passion
1

鉴于仍不完全支持HTML数据列表标记，我使用的另一种方法是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的示例代码进行操作，或使用下面的示例来获得一个有效的组合框。

<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>
— Flareman2020
source
-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>

点击查看输出屏幕

谢谢...：）

— 巴努普拉塔普
source
1
最好包含一些详细信息或说明您的答案起作用的原因。
— 查理·菲什
1
尽管此代码段可以解决问题，但提供说明确实有助于提高您的帖子质量。请记住，您将来会为读者回答这个问题，而这些人可能不知道您提出代码建议的原因。也请尽量不要在代码中添加解释性注释，因为这会降低代码和解释的可读性！
— 再见StackExchange，
-2

其他答案都没有令人满意，主要是因为UI看起来仍然很差。我发现了这个，这看起来不错，很接近中最美以及可定制的。

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

$('#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>
展开摘要

— 安德鲁
source
@maqs我看了看周围很多，当我发现这个库，并没有其他图书馆或解决方案在有迹象表明运行良好，并期待一样的，不管平台的全面解决方案。在某些通用平台上，许多解决方案看起来都非常糟糕。
— 安德鲁
@maqs之所以这么简单，是因为HTML不提供现成的支持，因此从外观到功能再到事件处理和配置的各个方面都必须被一起使用才能工作围绕HTML的局限性。
— 安德鲁
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.