logo标签列表

如何在HTML/Javascript中创建可编辑的组合框？

javascripthtmlcomboboxdrop-down-menu
35
我需要让用户从下拉列表中选择一个项目，但也允许他们输入任何文本，即使它与列表中的项目不匹配。如何在HTML和JavaScript的网页上实现这一点？ 文本字段不显示首选项。
如果用户打开下拉菜单，所有项目都必须显示，因此不能是只显示匹配项的简单自动完成。
3
你可以自己实现这个功能（提示：用你自己的HTML替换选择框，并让它的行为与选择框相同），但是为什么要重新发明轮子呢？http://jqueryui.com/demos/autocomplete/ - Boldewyn
1
@RobertKoritnik 啊，是的。但是他们比我的答案更近才添加了那个例子。在2010年，它是一个全新的小部件。 - Boldewyn
您可以在此网站上看到一些关于此的建议：https://dev59.com/0HI95IYBdhLWcg3wzhZ9#13468539 - camster
可能是重复的问题：如何在HTML中创建可编辑的下拉列表？ - Ed Ballot
W3C示例：https://www.w3.org/TR/wai-aria-practices-1.2/examples/combobox/combobox-autocomplete-list.html - Daniel Yang
显示剩余2条评论
7个回答
13
这里有一个相关的脚本： 演示, 源代码

或者另一个略微不同的脚本： 链接已删除（网站不存在）

1
谢谢！我选择第一个脚本。 - Christian Davén
@ChristianDavén，你在第一个链接中找到的js脚本源代码是从哪里找到的？ - shapeare
@shapeare，我不记得了，抱歉！ - Christian Davén
9
我知道这个问题已经在很久以前得到了回答，但是这里可能还有其他人遇到了问题并且找不到他们所需要的。我也曾经遇到过类似的困境，无法找到现有的插件完全符合我的需求，因此我编写了自己的jQuery UI插件来完成这项任务。它基于jQuery UI网站上的combobox示例。希望能对某些人有所帮助。 https://github.com/tmooney3979/jquery.ui.combify
4

我也在寻找答案，但是我找到的都已经过时了。

这个问题自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>

如果我没有找到这个，我会采用以下方法： http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html。
这是一个可编辑下拉框的脚本。
HTML5数据列表如何满足可编辑的要求？ - Josef.B
2
这种方法创建了一个普通的输入字段，在其中您可以键入，但是在您输入时还显示建议（或者，当您单击两次输入字段时为空时，先聚焦一次，然后第二次显示整个列表）。至少这是Firefox如何呈现它的。这里有一个示例：https://jsfiddle.net/6hyrjvvb/ - Matthijs Kooijman
在 FireFox Android 浏览器上无法运行 - Graphic Equaliser
3
谢谢你做这个！看起来足够简单！ - relipse
2
1
那是一个仅链接的答案，请添加更多信息，因为链接指向的页面可能会消失。 - Beryllium
谢谢伙计，这正是我在寻找的。 :) - Vishrant
1

我会尽力帮助您翻译。以下是需要翻译的内容：

忘记datalist元素，虽然它是自动完成功能的好解决方案，但不适用于组合框特性。

css：

.combobox {
    display: inline-block;
    position: relative;
}

.combobox select {
    display: none;
    position: absolute;
    overflow-y: auto;
}

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)：

$('.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);
});

这在使用文本输入而不是数字时也能正常工作。
我对代码进行了一点修改，以便在有多个组合框时能够更好地运行。 - Nagy Zoltán
0

试着这样做

<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>

请看下面的例子fiddle。
2
问题是如何使组合框可编辑，您刚刚将文本框重叠在组合框上。我认为这不是正确的解决方法。 - Vishrant
当您不想使用自定义按钮时，可以完美地使用。即使用浏览器提供的默认按钮集。 - atom217
@Vishrant 不是的，他将一个文本框重叠在一个下拉/选择框上，以创建一个组合框。 - Ron Newcomb
但它不起作用。添加一些<option>并选择它们。框未填充。 - Ron Newcomb
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接