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

Question

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

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

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

Answer 1

这是一个脚本：Demo，Source

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

Answer 2

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

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

Answer 3

您可以尝试我的可编辑组合qobxswpoi的实现

Answer 4

正在寻找答案，但我发现的一切都已经过时了。

这个问题从HTML5开始解决：http://www.zoonman.com/projects/combobox/

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>

Answer 5

我认为这符合您的要求：

http://www.dhtmlgoodies.com/scripts/form_widget_editable_select/form_widget_editable_select.html

Answer 6

忘记datalist元素是自动完成功能的良好解决方案，但不是组合框功能。

CSS：

https://github.com/RUPOJS/jsCombo

HTML：

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

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

js（jQuery）：

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

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

Answer 7

试着这样做

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

请看下面的例子

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