如何在 HTML/Javascript 中创建可编辑的组合框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3052130/
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
How can I create an editable combo box in HTML/Javascript?
提问by Christian Davén
I need to let users select an item from a dropdown list, but also allow them to instead enter any text, even if it doesn't match an item in the list. How can I achieve this on a web page with HTML and Javascript?
我需要让用户从下拉列表中选择一个项目，但也允许他们输入任何文本，即使它与列表中的项目不匹配。如何在带有 HTML 和 Javascript 的网页上实现这一点？
The selectfield doesn't let users enter text, and the inputtext field doesn't show the preferred alternatives.
该select字段不允许用户输入文本，并且input文本字段不显示首选替代项。
All items must show if the user opens the dropdown, so it can't be a simple auto-complete that only shows matching items.
如果用户打开下拉菜单，所有项目都必须显示，因此它不能是仅显示匹配项目的简单自动完成。
采纳答案by Tom Gullen
回答by portlandrock
I know this question is already answered, a long time ago, but this is for other people that may end up here and are having trouble finding what they need. I had trouble finding an existing plugin that did exactly what I needed, so I wrote my own jQuery UI plugin to accomplish this task. It's based on the combobox example on the jQuery UI site. Hopefully it might help someone.
我知道这个问题早在很久以前就已经得到了回答，但这是为其他人准备的，他们可能最终会来到这里并且无法找到他们需要的东西。我很难找到一个完全满足我需要的现有插件，所以我编写了自己的 jQuery UI 插件来完成这项任务。它基于 jQuery UI 站点上的组合框示例。希望它可以帮助某人。
回答by zoonman
You can try my implementation of editable combobox http://www.zoonman.com/projects/combobox/
你可以试试我对可编辑组合框的实现 http://www.zoonman.com/projects/combobox/
回答by Jook
Was looking for an Answer as well, but all I could find was outdated.
也在寻找答案，但我能找到的一切都已经过时了。
This Issue is solved since HTML5: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
此问题自 HTML5 以来已解决：https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/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>
If I had not found that, I would have gone with this approach:
如果我没有发现，我会采用这种方法：
http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html
http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html
回答by Nagy Zoltán
Forget datalist element that good solution for autocomplete function, but not for combobox feature.
忘记 datalist 元素是自动完成功能的好解决方案，但不是组合框功能。
css:
css：
.combobox {
display: inline-block;
position: relative;
}
.combobox select {
display: none;
position: absolute;
overflow-y: auto;
}
html:
html：
<div class="combobox">
<input type="number" name="" value="" min="" max="" step=""/><br/>
<select size="3">
<option value="0"> 0</option>
<option value="25"> 25</option>
<option value="40"> 40</option>
</select>
</div>
js (jQuery):
js (jquery):
$('.combobox').each(function() {
var
$input = $(this).find('input'),
$select = $(this).find('select');
function hideSelect() {
setTimeout(function() {
if (!$select.is(':focus') && !$input.is(':focus')) {
$select
.hide()
.css('z-index', 1);
}
}, 20);
}
$input
.focusin(function() {
if (!$select.is(':visible')) {
$select
.outerWidth($input.outerWidth())
.show()
.css('z-index', 100);
}
})
.focusout(hideSelect)
.on('input', function() {
$select.val('');
});
$select
.change(function() {
$input.val($select.val());
})
.focusout(hideSelect);
});
This works properly even when you use text input instead of number.
即使您使用文本输入而不是数字，这也能正常工作。
回答by RSS
回答by atom217
try doing this
尝试这样做
<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv">
<input name="filterTextField" type="text" id="filterTextField" tabindex="2" style="width: 140px;
position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" />
<div style="position: absolute;" id="filterDropdownDiv">
<select name="filterDropDown" id="filterDropDown" tabindex="1000"
onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute;
top: 0px; left: 0px; z-index: 1; width: 165px;">
<option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option>
</select>
please look at following example fiddle
请看下面的示例小提琴
