HTML组合框，带有用于键入条目的选项 [英] HTML combo box with option to type an entry

问题描述

除了选择列表中已有的任何值，我还可以输入到组合框中。但是，我似乎找不到如何做到这一点的信息。在之前

/ code>（见下面的注释），您将提供一个额外的输入元素供用户输入自己的选项。

 < select name =example> 
< option value =A> A< / option> 
< option value =B> A< / option> 
< option value = - >其他< / option> 
< / select> 
 
< input type =textname =other> 
 

此机制可在所有浏览器中使用，且不需要JavaScript 。

如果选择了其他选项，您可以使用一些JavaScript来显示仅显示输入 p>

datalist元素

datalist 元素旨在提供这个概念的更好的机制。重要的是，它不支持在Safari，iOS Safari或Opera Mini。 Internet Explorer的实现也有一些问题。此信息将过期，因此请查看我可以使用以查看当前的数据库支持以了解最新信息。

 < input type =textname =examplelist =exampleList> 
< datalist id =exampleList> 
< option value =A> 
< option value =B> 
< / datalist> 
  

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?

解决方案

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

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

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

datalist Element

The datalist element 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 support for more recent info.

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

这篇关于HTML组合框，带有用于键入条目的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！