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

Question

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

Answer 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 < 12.2，不支持此功能或实现存在问题。检查 Can I Use 页面以查看当前的 datalist 支持。

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

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

Answer 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;
 }

Answer 4

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

archive.org（不是很有用）

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

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

Answer 6

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

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

Answer 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

Answer 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 的示例代码或使用下面的示例来获得一个有效的组合框。

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

Answer 9

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

Answer 10

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

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

谢谢...：）