我正在构建新网站，我需要一个下拉菜单来选择我网站中的内容数量。但同时我需要这个下拉列表来接受文本。因此，如果客户想从下拉列表中进行选择，那么他可以，如果客户想通过文本输入金额，那么他也可以。如您所见，我想让它成为双重的。
例如：假设有一个amount下拉菜单，它的元素是(1,2,3)；
假设现在客户需要金额为 5 - 这是他的权利 - 它不存在于下拉列表中，因此客户现在必须以文本形式输入金额。因此，对于任何条目，客户必须从下拉列表中选择或以文本形式输入金额。
在描述了我的问题以及我向您介绍的简单示例之后，这是我的问题：
是否有 HTML 代码可以将下拉菜单和文本字段合二为一，作为双重的，而不是分开的？
您可以使用 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>包含来自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;
}
欢迎对我的实施提出任何改进意见。希望有人觉得这很有帮助。
您可以使用<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 自动完成的解决方案来完成这项工作。
第 1 步：使列表固定高度和可滚动
从https://jqueryui.com/autocomplete/ “可滚动”示例获取代码，将最大高度设置为结果列表，使其表现为选择框。
第 2 步：打开焦点列表：
第 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：
受@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 令牌输入。实际上比上面提到的其他一些选项更喜欢 UI。
http://loopj.com/jquery-tokeninput/
另请参阅：http ://railscasts.com/episodes/258-token-fields以获得解释
您可以TextField用作下拉选择...试试这个代码
var data = ['apple','orange','banana','pineapple']
<TextField
select
size="small"
fullWidth
SelectProps={{ MenuProps: { sx: { maxHeight: 247 } } }}
>
{data.map((text) => (
<MenuItem value={text}>{text}</MenuItem>
))}
</TextField>