数据列表迁移到 Chrome Canary 版

Eiji Kitamura

填写表单有时会让人觉得很麻烦。为用户提供多种选择，同时让他们能够自由输入内容非常重要。datalist 元素（刚刚发布在 Chrome Canary [M20] 中）可轻松实现此目的。

通过使用 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 广泛适用于最新版 Firefox、Opera 和 Internet Explorer（10 版之后）。因此，您不必过于担心兼容性问题，但如果您想确保它在所有浏览器中都能正常运行，请尝试以下操作：

<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”都作为查询参数捕获。