数据列表迁移到 Chrome Canary 版

填写表单有时让人感到很麻烦。为用户提供多种选择,同时让他们能够自由输入,这一点非常重要。在 Chrome Canary 版 (M20) 中,我们使用 datalist 元素轻松做到这一点。

通过使用 datalist,您的应用可以定义用户应从中选择的推荐结果列表。他们可以从列表中选择选项,也可以输入自由格式的文本。

现场演示

通过在 input 元素的 list 属性中指定 id,可将选项与 datalist 配对:

<input type="text" value="" list="fruits" />
<datalist id="fruits">
    <option value="Apple"></option>
    <option value="Orange"></option>
    <option value="Peach"></option>
</datalist>

datalist 在版本 10 之后的最新 Firefox、Opera 和 Internet Explorer 上广泛可用。因此,您不必担心兼容性问题,但如果您希望确保兼容性能跨浏览器运行,请尝试以下操作:

<datalist id="fruits">
    Pick your favorite fruit
    <select name="fruit_sel">
    <option value="Apple">Apple</option>
    <option value="Orange">Orange</option>
    <option value="Peach">Peach</option>
    </select>
    or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />

如果 datalist 适用于您的浏览器,则 datalist 下的所有内容(option 元素除外)都将隐藏。如果您使用这种回退机制,请确保您的服务器同时捕获“fruit_sel”和“fruit”作为查询参数。