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

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 select field doesn't let users enter text, and the input text field doesn't show the preferred alternatives.

选择字段不允许用户输入文本，输入文本字段不显示首选替代项。

All items must show if the user opens the dropdown, so it can't be a simple auto-complete that only shows matching items.

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

7 个解决方案

#1

Here is a script for that: Demo, Source

这是一个脚本：Demo，Source

Or another one which works slightly differently: link removed (site no longer exists)

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

#2

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站点上的组合框示例。希望它可以帮助某人。

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

#3

You can try my implementation of editable combobox http://www.zoonman.com/projects/combobox/

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

#4

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.

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

#5

I think this will meet your requirements:

我认为这符合您的要求：

https://github.com/RUPOJS/jsCombo

#6

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

#7

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

请看下面的例子小提琴

#1