我正在构建新网站，我需要一个下拉菜单来选择我网站中的内容数量。但同时我需要这个下拉列表来接受文本。因此，如果客户想从下拉列表中进行选择，那么他可以，如果客户想通过文本输入金额，那么他也可以。如您所见，我想让它成为双重的。
例如：假设有一个amount下拉菜单，其元素为(1,2,3)；
现在假设客户需要金额为 5 - 这是他的权利 - 它不存在于下拉列表中，因此客户现在必须以文本形式输入金额。因此，对于任何条目，客户必须从下拉列表中选择或以文本形式输入金额。
在描述了我的问题，以及我给你介绍的简单例子之后，这是我的问题：
是否有 HTML 代码可以使下拉菜单和文本字段合二为一，而不是分开？
【问题讨论】：
标签： html html-select html-input
您可以使用 HTML5 <datalist> 原生地做到这一点：
<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>【讨论】：
<option label='label1' value='value1' /> 只是一个想法。
包含来自dhtmlgoodies 的脚本并像这样初始化：
<input type="text" name="myText" value="Norway"
selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico">
createEditableSelect(document.forms[0].myText);
这是一个自定义解决方案，它结合了 <select> 元素和 <input> 元素，设置它们的样式，并通过 JavaScript 来回切换
<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
<select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;"
onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">
<option></option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<input type="text" name="displayValue" id="displayValue"
placeholder="add/select a value" onfocus="this.select()"
style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;" >
<input name="idValue" id="idValue" type="hidden">
</div>
【讨论】：
现代解决方案是“搜索”类型的输入字段！
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search https://www.w3schools.com/tags/tag_datalist.asp
在 HTML 中的某处定义数据列表以供以后参考：
<datalist id="mylist">
<option value="Option 1">
<option value="Option 2">
<option value="Option 3">
</datalist>
然后您可以像这样定义您的搜索输入：
<input type="search" list="mylist">
瞧。非常好和容易。
【讨论】：
我发现这个问题和讨论非常有帮助，并想展示我最终得到的解决方案。它基于@DevangRathod 给出的答案，但我使用了 jQuery 并对它进行了一些调整，因此想展示一个完整的注释示例，以帮助其他从事类似工作的人。我最初一直在使用 HTML5 数据列表元素，但对该解决方案不满意，因为它从下拉列表中删除了与框中键入的文本不匹配的选项。在我的应用程序中，我希望完整列表始终可用。
完整功能演示在这里：https://jsfiddle.net/abru77mm/
HTML：
<!--
Most style elements I left to the CSS file, but some are here.
Reason being that I am actually calculating my width dynamically
in my application so when I dynamically formulate this HTML, I
want the width and all the factors (such as padding and border
width and margin) that go into determining the proper widths to
be controlled by one piece of code, so those pieces are done in
the in-line style. Otherwise I leave the styling to the CSS file.
-->
<div class="data-list-input" style="width:190px;">
<select class="data-list-input" style="width:190px;">
<option value=""><Free Form Text></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<!-- Note that though the select/option allows for a different
display and internal value, there is no such distinction in the
text box, so for all the options (except the "none" option) the
value and content of the option should be identical. -->
</select>
<input class="data-list-input" style="width:160px;padding:4px 6px;border-width:1px;margin:0;" type="text" name="sex" required="required" value="">
</div>
JS：
jQuery(function() {
//keep the focus on the input box so that the highlighting
//I'm using doesn't give away the hidden select box to the user
$('select.data-list-input').focus(function() {
$(this).siblings('input.data-list-input').focus();
});
//when selecting from the select box, put the value in the input box
$('select.data-list-input').change(function() {
$(this).siblings('input.data-list-input').val($(this).val());
});
//When editing the input box, reset the select box setting to "free
//form input". This is important to do so that you can reselect the
//option you had selected if you want to.
$('input.data-list-input').change(function() {
$(this).siblings('select.data-list-input').val('');
});
});
CSS：
div.data-list-input
{
position: relative;
height: 20px;
display: inline-flex;
padding: 5px 0 5px 0;
}
select.data-list-input
{
position: absolute;
top: 5px;
left: 0px;
height: 20px;
}
input.data-list-input
{
position: absolute;
top: 0px;
left: 0px;
height: 20px;
}
欢迎任何改进我的实施的 cmets。希望有人觉得这很有帮助。
【讨论】：
您可以使用<datalist> 标签代替<select> 标签。
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
【讨论】：
我喜欢 jQuery Token 输入。实际上比上面提到的其他一些选项更喜欢 UI。
【讨论】：
受@ajdeguzman 的 js fiddle 启发（让我开心），这是我的节点/React 衍生产品：
<div style={{position:"relative",width:"200px",height:"25px",border:0,
padding:0,margin:0}}>
<select style={{position:"absolute",top:"0px",left:"0px",
width:"200px",height:"25px",lineHeight:"20px",
margin:0,padding:0}} onChange={this.onMenuSelect}>
<option></option>
<option value="starttime">Filter by Start Time</option>
<option value="user" >Filter by User</option>
<option value="buildid" >Filter by Build Id</option>
<option value="invoker" >Filter by Invoker</option>
</select>
<input name="displayValue" id="displayValue"
style={{position:"absolute",top:"2px",left:"3px",width:"180px",
height:"21px",border:"1px solid #A9A9A9"}}
onfocus={this.select} type="text" onChange={this.onIdFilterChange}
onMouseDown={this.onMouseDown} onMouseUp={this.onMouseUp}
placeholder="Filter by Build ID"/>
</div>
看起来像这样：
【讨论】：
我想添加一个基于 jQuery 自动完成的解决方案来完成这项工作。
第 1 步：使列表固定高度且可滚动
从https://jqueryui.com/autocomplete/“可滚动”示例中获取代码，将最大高度设置为结果列表，以便它表现为选择框。
第 2 步：打开焦点列表：
Display jquery ui auto-complete list on focus event
第 3 步：将最小字符数设置为 0，这样无论输入中有多少字符，它都会打开
最终结果：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Scrollable results</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
// source: availableTags, // uncomment this and comment the following to have normal autocomplete behavior
source: function (request, response) {
response( availableTags);
},
minLength: 0
}).focus(function(){
// $(this).data("uiAutocomplete").search($(this).val()); // uncomment this and comment the following to have autocomplete behavior when opening
$(this).data("uiAutocomplete").search('');
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
在这里查看 jsfiddle：
【讨论】：