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

Posted 2023-04-18

【中文标题】如何在 HTML/Javascript 中创建可编辑的组合框？

【英文标题】：How can I create an editable combo box in HTML/Javascript?

【发布时间】：2011-03-04 09:17:51

【问题描述】：

我需要让用户从下拉列表中选择一个项目，但也允许他们输入任何文本，即使它与列表中的项目不匹配。如何在带有 html 和 javascript 的网页上实现这一点？

select 字段不允许用户输入文本，input 文本字段不显示首选选项。

如果用户打开下拉菜单，所有项目都必须显示，因此它不能是只显示匹配项目的简单自动完成。

【问题讨论】：

你可以自己做（提示：用你自己的 HTML 替换 select，它的行为就像一个选择框），但为什么要再次发明***呢？ jqueryui.com/demos/autocomplete

@Boldewyn：太糟糕了，您没有将其放入答案中。因为这实际上是 OP 要求的相同控制。演示页面实际上在 ComboBox 上显示它，它充当普通选择 + 数据输入。

@RobertKoritnik 啊，是的。但他们最近添加了这个例子，而不是我的回答。早在 10 年，它就是一个全新的小部件。

你会在这个网站上看到一些建议：***.com/questions/2141357/…

How can I create an editable dropdownlist in HTML?的可能重复

【参考方案1】：

这是一个脚本： Demo, Source

或者另一个工作方式略有不同的： 链接已删除（网站不再存在）

【讨论】：

谢谢！我将使用第一个脚本。

@ChristianDavén 你在第一个链接中哪里找到源 js 脚本？

@shapeare，我不记得了，抱歉！

【参考方案2】：

我知道这个问题在很久以前就已经得到解答，但这是针对可能最终来到这里但无法找到所需内容的其他人。我很难找到一个完全符合我需要的现有插件，所以我编写了自己的 jQuery UI 插件来完成这项任务。它基于 jQuery UI 站点上的组合框示例。希望它可以帮助某人。

https://github.com/tmooney3979/jquery.ui.combify

【参考方案3】：

你可以试试我实现的可编辑组合框http://www.zoonman.com/projects/combobox/

【讨论】：

感谢您这样做！看起来很简单！

【参考方案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数据列表如何满足可编辑的要求？

这种方法会创建一个常规输入字段，您可以在其中输入，但在您输入时也会显示建议（或者，当您在输入字段为空时单击两次，一次聚焦并然后第二次显示整个列表）。至少 Firefox 是这样渲染它的。这是一个示例：jsfiddle.net/6hyrjvvb

【参考方案5】：

我认为这将满足您的要求：

https://github.com/RUPOJS/jsCombo

【讨论】：

这是一个仅链接的答案，所以请添加更多信息，因为链接指向的页面可能会消失。

感谢哥们，这实际上是我一直在寻找的。 :)

【参考方案6】：

忘记 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);
);

即使您使用文本输入而不是数字，这也能正常工作。

【讨论】：

当我们有多个组合框时，我做了一些修改以获得更好的行为。

【参考方案7】：

尝试这样做

<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

【讨论】：

问题是如何使组合框可编辑，您刚刚将文本框重叠在组合框上。我认为这不是正确的解决方案。

当您不想使用自定义按钮时，

工作得很好。即使用浏览器提供的默认按钮集

@Vishrant 不，他在 dropdown/select 顶部重叠了一个文本框以创建一个 combination box

但这不起作用。添加一些 并选择它们。没有填充框。