带有输入条目选项的 HTML 组合框

Question

提问by birdus

I was under the impression you could type into a combo box besides selecting any values already in the list. However, I can't seem to find info on how to do this. Is there a property I need to add to it to allow typing of text?

我的印象是除了选择列表中已有的任何值之外，您还可以在组合框中键入内容。但是，我似乎无法找到有关如何执行此操作的信息。是否有我需要添加的属性以允许输入文本？

Answer 1

回答by Fenton

Before datalist(see note below), you would supply an additional inputelement for people to type in their own option.

在此之前datalist（请参阅下面的注释），您需要提供一个额外的input元素供人们输入他们自己的选项。

<select name="example">
  <option value="A">A</option>
  <option value="B">A</option>
  <option value="-">Other</option>
</select>

<input type="text" name="other">

This mechanism works in all browsers and requires no JavaScript.

这种机制适用于所有浏览器，不需要 JavaScript。

You could use a little JavaScript to be clever about only showing the inputif the "Other" option was selected.

您可以使用一点 JavaScript 巧妙地仅显示input“其他”选项是否被选中。

datalist Element

数据列表元素

The datalistelement is intended to provide a better mechanism for this concept. Importantly, it has no support in Safari, iOS Safari or Opera Mini. Internet Explorer implementation has some issues too. This information will go out of date, so check Can I Use to see current datalist supportfor more recent info. (This is supported by iOS Safari ≥ 12.2)

该datalist元素旨在为此概念提供更好的机制。重要的是，它不支持 Safari、iOS Safari 或 Opera Mini。Internet Explorer 实现也有一些问题。此信息将过时，因此请检查我可以使用以查看当前数据列表支持以获取更多最新信息。（iOS Safari ≥ 12.2 支持此功能）

<input type="text" name="example" list="exampleList">
<datalist id="exampleList">
  <option value="A">  
  <option value="B">
</datalist>

Answer 2

回答by Kristóf Szalay

in HTML, you do this backwards: You define a text input and attach a datalist to it. (note the list attribute of the input).

在 HTML 中，您可以反向执行此操作：您定义一个文本输入并将数据列表附加到它。（注意输入的列表属性）。

<input type="text" list="browsers" />

<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

Answer 3

回答by Celso Soares

This link can help you: http://www.scriptol.com/html5/combobox.php

此链接可以帮助您：http: //www.scriptol.com/html5/combobox.php

You have two examples. One in html4 and other in html5

你有两个例子。一个在 html4 中，另一个在 html5 中

HTML5

<input type="text" list="browsers"/>
 <datalist id="browsers">
    <option>Google</option>
    <option>IE9</option>
 </datalist>

HTML4

 <input type="text" id="theinput" name="theinput" />
 <select name="thelist" onChange="combo(this, 'theinput')">
   <option>one</option>
   <option>two</option>
   <option>three</option>
 </select>

 function combo(thelist, theinput) {
     theinput = document.getElementById(theinput);
     var idx = thelist.selectedIndex;
     var content = thelist.options[idx].innerHTML;
     theinput.value = content;
 }

Answer 4

回答by Lemon Juice

The dojoexample here do not work when applied to existing code in most cases. Therefor I had to find an alternate, found here - hxxp://technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/ (now points to a spam site or worse)

dojo大多数情况下，当应用于现有代码时，此处的示例不起作用。因此，我不得不找到一个替代方法，在这里找到 - hxxp://technologymantrablog.com/how-to-create-a-combo-box-with-text-input-jquery-autocomplete/（现在指向垃圾邮件站点或更糟)

archive.org(not very useful)

archive.org（不是很有用）

Here is the jsfiddle - https://jsfiddle.net/ze7fgby7/

这是 jsfiddle - https://jsfiddle.net/ze7fgby7/

Answer 5

回答by kofifus

Well it's 2016 and there is still no easy way to do a combo ... sure we have datalist but without safari/ios support it's not really usable. At least we have ES6 .. below is an attempt at a combo class that wraps a div or span, turning it into a combo by putting an input box on top of select and binding the relevant events.

嗯，现在是 2016 年，仍然没有简单的方法来进行组合......当然我们有数据列表，但没有 safari/ios 支持，它不是真的可用。至少我们有 ES6 .. 下面是一个组合类的尝试，它包装了一个 div 或 span，通过在 select 顶部放置一个输入框并绑定相关事件将其变成一个组合。

see the code at: https://github.com/kofifus/Combo

见代码：https: //github.com/kofifus/Combo

(the code relies on the class pattern from https://github.com/kofifus/New)

（代码依赖于https://github.com/kofifus/New的类模式）

Creating a combo is easy ! just pass a div to it's constructor:

创建组合很容易！只需将 div 传递给它的构造函数：

let mycombo=Combo.New(document.getElementById('myCombo'));
mycombo.options(['first', 'second', 'third']);

mycombo.onchange=function(e, combo) {
  let val=combo.value;
  // let val=this.value; // same as above
  alert(val);
 }

<script src="https://rawgit.com/kofifus/New/master/new.min.js"></script>
<script src="https://rawgit.com/kofifus/Combo/master/combo.min.js"></script>

<div id="myCombo" style="width:100px;height:20px;"></div>

Answer 6

回答by tdolphin

This one is much smaller, doesn't require jquery and works better in safari. https://github.com/Fyrd/purejs-datalist-polyfill/

这个要小得多，不需要 jquery 并且在 safari 中效果更好。 https://github.com/Fyrd/purejs-datalist-polyfill/

Check the issues for the modification to add a downarrow. https://github.com/Fyrd/purejs-datalist-polyfill/issues

检查修改的问题以添加向下箭头。 https://github.com/Fyrd/purejs-datalist-polyfill/issues

Answer 7

回答by Ladislav Zima

My solution is very simple, looks exactly like a native editable combobox and yet works even in IE6 (some answers here require a lot of code or external libraries and the result is so so, e.g. the text in the textbox goes behind the dropdown icon of the combobox' part or it doesn't look like an editable combobox at all).

我的解决方案非常简单，看起来就像一个原生的可编辑组合框，但即使在 IE6 中也能工作（这里的一些答案需要大量代码或外部库，结果是如此，例如文本框中的文本位于下拉图标的后面组合框的部分，或者它看起来根本不像可编辑的组合框）。

The point is to clip the combobox only the dropdown icon to be visible above the textbox. And the textbox is wide a bit underneath the combobox' part, so you don't see its right end - visually continues with the combobox: https://jsfiddle.net/dLsx0c5y/2/

关键是将组合框剪辑为仅在文本框上方可见的下拉图标。文本框在组合框的下方有点宽，所以你看不到它的右端 - 视觉上继续组合框：https: //jsfiddle.net/dLsx0c5y/2/

select#programmoduleselect
{
    clip: rect(auto auto auto 331px);
    width: 351px;
    height: 23px;
    z-index: 101; 
    position: absolute;
}

input#programmodule
{
    width: 328px;
    height: 17px;
}

<table><tr>
<th>Programm / Modul:</th>
<td>
    <select id="programmoduleselect"
        onchange="var textbox = document.getElementById('programmodule'); textbox.value = (this.selectedIndex == -1 ? '' : this.options[this.selectedIndex].value); textbox.select(); fireEvent2(textbox, 'change');"
        onclick="this.selectedIndex = -1;">
        <option value=RFEM>RFEM</option>
        <option value=RSTAB>RSTAB</option>
        <option value=STAHL>STAHL</option>
        <option value=BETON>BETON</option>
        <option value=BGDK>BGDK</option>
    </select>
    <input name="programmodule" id="programmodule" value="" autocomplete="off"
        onkeypress="if (event.keyCode == 13) return false;" />
</td>
</tr></table>

(Used originally e.g. here, but don't send the form: old.dlubal.com/WishedFeatures.aspx )

（最初用于例如此处，但不要发送表格： old.dlubal.com/WishedFeatures.aspx ）

EDIT: The styles need to be a bit different for macOS: Ch is ok, for FF increase the combobox' height, Safari and Opera ignore the combobox' height so increase their font size (has an upper limit, so then decrease the textbox' height a bit): https://i.stack.imgur.com/efQ9i.png

编辑：macOS 的样式需要稍有不同：Ch 可以，对于 FF 增加组合框的高度，Safari 和 Opera 忽略组合框的高度，因此增加它们的字体大小（有一个上限，然后减少文本框）高度一点）：https: //i.stack.imgur.com/efQ9i.png

Answer 8

回答by Flareman2020

Given that the HTML datalist tag is still not fully supported, an alternate approach that I used is the Dojo Toolkit ComboBox. It was easier to implement and better documented than other options I've explored. It also plays nicely with existing frameworks. In my case, I added this combobox to an existing website that's based on Codeigniter and Bootstrap with no problems You just need to be sure to apply the Dojo theme (e.g. class="claro") to the combo's parent element instead of the body tag to avoid styling conflicts.

考虑到 HTML 数据列表标记仍未得到完全支持，我使用的另一种方法是Dojo Toolkit ComboBox。与我探索过的其他选项相比，它更容易实现并且记录得更好。它还可以很好地与现有框架配合使用。就我而言，我将此组合框添加到一个基于 Codeigniter 和 Bootstrap 的现有网站，没有任何问题您只需要确保将 Dojo 主题（例如 class="claro"）应用于组合的父元素而不是 body 标记避免样式冲突。

First, include the CSS for one of the Dojo themes (such as 'Claro'). It's important that the CSS file is included prior to the JS files below.

首先，包含 Dojo 主题之一（例如“Claro”）的 CSS。在下面的 JS 文件之前包含 CSS 文件很重要。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dijit/themes/claro/claro.css" />

Next, include jQuery and Dojo Toolkit via CDN

接下来，通过 CDN 包含 jQuery 和 Dojo Toolkit

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>

Next, you can just follow Dojo's sample codeor use the sample below to get a working combobox.

接下来，您可以只遵循Dojo 的示例代码或使用下面的示例来获得一个有效的组合框。

<body>
    <!-- Dojo Dijit ComboBox with 'Claro' theme -->
    <div class="claro"><input id="item_name_1" class=""/></div>

    <script type="text/javascript">
        $(document).ready(function () {
            //In this example, dataStore is simply an array of JSON-encoded id/name pairs
            dataStore = [{"id":"43","name":"Domain Name Renewal"},{"id":"42","name":"Hosting Renewal"}];

            require(
                [ "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"], 
                function (Memory, ComboBox) {
                    var stateStore = new Memory({
                        data: dataStore
                    });

                    var combo = new ComboBox({
                        id: "item_name_1",
                        name: "desc_1",
                        store: stateStore,
                        searchAttr: "name"},                        
                        "item_name_1"
                        ).startup();

                });

        });

    </script>
</body>

Answer 9

回答by Andrew

None of the other answers were satisfying, largely because the UI still looks bad. I found this, which looks good and is very close to being perfect as well as customizable.

其他答案都不令人满意，主要是因为用户界面看起来仍然很糟糕。我发现这看起来不错，并且非常接近完美和可定制。

A full list of examples and options and such can be found here, but here's a basic demo:

可以在此处找到示例和选项的完整列表，但这里有一个基本演示：

$('#editable-select').editableSelect();

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-editable-select.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery-editable-select.min.js"></script>

<select id="editable-select">
 <option>Alfa Romeo</option>
 <option>Audi</option>
 <option>BMW</option>
 <option>Citroen</option>
</select>

Answer 10

回答by kmb

Look at ComboBox or Combo on this site: http://www.jeasyui.com/documentation/index.php#

看看这个网站上的 ComboBox 或 Combo：http: //www.jeasyui.com/documentation/index.php#

带有输入条目选项的 HTML 组合框

提问by birdus

回答by Fenton

datalist Element

数据列表元素

回答by Kristóf Szalay

回答by Celso Soares

回答by Lemon Juice

回答by kofifus

回答by tdolphin

回答by Ladislav Zima

回答by Flareman2020

回答by Andrew

回答by kmb

相关推荐

最近更新

标签

带有输入条目选项的 HTML 组合框

提问by birdus

回答by Fenton

datalist Element

数据列表元素

回答by Kristóf Szalay

回答by Celso Soares

回答by Lemon Juice

回答by kofifus

回答by tdolphin

回答by Ladislav Zima

回答by Flareman2020

回答by Andrew

回答by kmb

相关推荐

在 HTML 中的 div 中播放视频

Html 带有 css 固定位置的 iframe：可能吗？

Html 指定 iframe 的内容而不是页面的 src 属性

Html 在 XSLT 的 XML 中使用 <br /> 标记

相关推荐

最近更新

标签