Html 下拉菜单/文本字段合二为一
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18309059/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drop Down Menu/Text Field in one
提问by khalid jarrah
I'm working on building new site, and I need a drop down menu to select the amount of something in my site. But at the same time I need this drop down list to accept text. So if the client wants to choose from the drop down list then he can, also if the client want to enter the amount by text then he can also. As you can see I want to make it dual.
我正在构建新网站，我需要一个下拉菜单来选择我网站中的内容数量。但同时我需要这个下拉列表来接受文本。因此，如果客户想从下拉列表中进行选择，那么他可以，如果客户想通过文本输入金额，那么他也可以。正如你所看到的，我想把它变成双重的。
For example: suppose there is an amountdrop down menu, and its elements are (1,2,3);
例如：假设有一个amount下拉菜单，其元素为(1,2,3)；
Suppose now that the client needs the amount to be 5 - this is his right - it does not exist in the drop down list, so the client now must enter the amount textually. So for any entry the client must either choose from the drop down list or enter the amount textually.
假设现在客户需要金额为 5 - 这是他的权利 - 它不存在于下拉列表中，因此客户现在必须以文本形式输入金额。因此，对于任何条目，客户必须从下拉列表中选择或以文本形式输入金额。
After the description of my problem, and the simple example that I have introduced to you, here is my question:
在描述了我的问题以及我向您介绍的简单示例之后，这是我的问题：
Is there HTML code to make a drop down menu and a text field in one, as dual, not separated?
是否有 HTML 代码可以将下拉菜单和文本字段合二为一，作为双重的，而不是分开的？
采纳答案by Devang Rathod
Option 1
选项1
Include the script from dhtmlgoodiesand initialize like this:
包括来自dhtmlgoodies的脚本并像这样初始化：
<input type="text" name="myText" value="Norway"
selectBoxOptions="Canada;Denmark;Finland;Germany;Mexico">
createEditableSelect(document.forms[0].myText);
Option 2
选项 2
Here's a custom solution which combines a <select>element and <input>element, styles them, and toggles back and forth via JavaScript
这是一个自定义解决方案，它结合了<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;#width:180px;height:23px; height:21px;#height:18px;border:1px solid #556;" >
<input name="idValue" id="idValue" type="hidden">
</div>
回答by onaclov2000
You can do this natively with HTML5 <datalist>:
您可以使用 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>回答by Daniel Skarbek
I found this question and discussion very helpful and wanted to show the solution I ended up with. It is based on the answer given by @DevangRathod, but I used jQuery and made a couple tweaks to it, so wanted to show a fully commented sample to help anyone else working on something similar. I originally had been using the HTML5 data-list element, but was dissatisfied with that solution since it removes options from the drop down list that don't match text typed in the box. In my application, I wanted the full list to always be available.
我发现这个问题和讨论非常有帮助，并想展示我最终得到的解决方案。它基于@DevangRathod 给出的答案，但我使用了 jQuery 并对其进行了一些调整，因此想展示一个完整评论的示例，以帮助其他人进行类似的工作。我最初一直在使用 HTML5 数据列表元素，但对该解决方案不满意，因为它从下拉列表中删除了与框中键入的文本不匹配的选项。在我的应用程序中，我希望完整列表始终可用。
Fully functional demo here: https://jsfiddle.net/abru77mm/
功能齐全的演示在这里：https: //jsfiddle.net/abru77mm/
HTML:
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:
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:
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;
}
Any comments for improvement on my implementation welcome. Hope someone finds this helpful.
欢迎对我的实施提出任何改进意见。希望有人觉得这有帮助。
回答by Gunnar Forsgren - Mobimation
Inspired by the js fiddle by @ajdeguzman (made my day), here is my node/React derivative:
受到@ajdeguzman 的 js 小提琴的启发（让我开心），这里是我的节点/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>
Looks like this:
看起来像这样：
回答by cslotty
The modern solution is an input field of type "search"!
现代解决方案是“搜索”类型的输入字段！
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/searchhttps://www.w3schools.com/tags/tag_datalist.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search https://www.w3schools.com/tags/tag_datalist.asp
Somewhere in your HTML you define a datalist for later reference:
在 HTML 中的某处定义一个数据列表以供以后参考：
<datalist id="mylist">
<option value="Option 1">
<option value="Option 2">
<option value="Option 3">
</datalist>
Then you can define your search input like this:
然后你可以像这样定义你的搜索输入：
<input type="search" list="mylist">
Voilà. Very nice and easy.
瞧。非常好和容易。
回答by Matthias
I like jQuery Token input. Actually prefer the UI over some of the other options mentioned above.
我喜欢 jQuery 令牌输入。实际上比上面提到的其他一些选项更喜欢 UI。
http://loopj.com/jquery-tokeninput/
http://loopj.com/jquery-tokeninput/
Also see: http://railscasts.com/episodes/258-token-fieldsfor an explanation
另请参阅：http: //railscasts.com/episodes/258-token-fields以获得解释
回答by Alexandru Trandafir Catalin
I'd like to add a jQuery autocomplete based solution that does the job.
我想添加一个基于 jQuery 自动完成的解决方案来完成这项工作。
Step 1: Make the list fixed height and scrollable
第 1 步：使列表固定高度且可滚动
Get the code from https://jqueryui.com/autocomplete/"Scrollable" example, setting max height to the list of results so it behaves as a select box.
从https://jqueryui.com/autocomplete/“Scrollable”示例获取代码，将最大高度设置为结果列表，使其表现为选择框。
Step 2: Open the list on focus:
第 2 步：打开焦点列表：
Display jquery ui auto-complete list on focus event
Step 3: Set minimum chars to 0 so it opens no matter how many chars are in the input
第 3 步：将最小字符数设置为 0，这样无论输入中有多少字符它都会打开
Final result:
最后结果：
<!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>
Check jsfiddle here:
在此处检查 jsfiddle：
