带有选项的HTMLcombobox，用于input条目
除了select列表中的任何值外，我还可以inputcombobox。 但是，我似乎无法find如何做到这一点的信息。 我需要添加一个属性来允许input文本吗？
在datalist之前（见下面的注释），你会提供一个额外的input元素供人们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 。
如果select“其他”选项，您可以使用一些JavaScript来巧妙地显示input 。
数据元素
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>
在HTML中，你做这个倒退：你定义一个文本input：
<input type="text" list="browsers" />
并附上一个datalist。 （注意input的列表属性）。
<datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>
这个链接可以帮助你： http : //www.scriptol.com/html5/combobox.php
你有两个例子。 一个在html4中，另一个在html5中
HTML5
<input type=text list=browsers > <datalist id=browsers > <option> Google <option> IE9 </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; }
那么这是2016年，仍然没有简单的方法来做一个组合…确定我们有datalist，但没有safari / ios的支持，这是不是真的可用。 至less我们有ES6 ..下面是一个组合类的尝试，它包装一个div或者跨度，把一个input框放在select和binding的相关事件之上，把它变成一个组合。
请参阅https://github.com/kofifus/Combo上的代码;
（代码依赖于https://github.com/kofifus/New中的类模式）;
创build组合很简单！ 只是传递一个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="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>
在大多数情况下， dojo示例在应用于现有代码时不起作用。 因此，我不得不find一个备用，在这里find – 现在指向一个垃圾邮件网站或更糟糕的）
archive.org （不是很有用）
这是jsfiddle – https://jsfiddle.net/ze7fgby7/
这一个是更小，不需要jquery和safari更好的工作。 https://github.com/Fyrd/purejs-datalist-polyfill/
检查修改的问题添加一个downarrow。 https://github.com/Fyrd/purejs-datalist-polyfill/issues
由于HTML datalist标记仍然不完全支持，我使用的另一种方法是Dojo Toolkit ComboBox 。 比我已经探索的其他选项更容易实施和更好地logging。 它也与现有的框架很好地搭配。 在我的情况下，我将这个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的示例代码或使用下面的示例来获取工作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>
我的解决scheme非常简单，看起来就像一个原生的可编辑combobox，即使在IE6中也可以工作（这里的一些答案需要很多代码或外部库，结果如此，例如文本框中的文本位于combobox“部分，或者看起来不像可编辑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）
编辑：风格需要有点不同的macOS：通道是好的，FF增加combobox的高度，Safari和Opera忽略combobox的高度，所以增加他们的字体大小（有一个上限，所以然后减less文本框'身高有点）： https ： efQ9i.png
在这个网站上查看ComboBox或Combo： http : //www.jeasyui.com/documentation/index.php#
<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>
谢谢…：）
