鹏程

一个给 input 标签扩展列表功能的元素

2022/01/25 HTML 共 1761 字，约 6 分钟

在写一个小工具时，想给 input 输入框增加可选项，但又不是 select 那样不能输入新的，怎么办呢。我知道各种 UI 框架会有 select 和 input 结合起来，但我这个原生的标签怎么实现呢。

想到很久之前见到一个标签：<datalist>。是的，这个就是今天的主角～

datalist 基本使用

简介：HTML <datalist>元素包含了一组<option>元素，这些元素表示其它表单控件可选值. 允许内容要么 段落内容 要么 0 个或多个 <option>元素. 遗漏标签不允许，开始标签和结束标签都不能省略。 允许父级元素任何接受段落内容的元素.

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate"></option>
    <option value="Coconut"></option>
    <option value="Mint"></option>
    <option value="Strawberry"></option>
    <option value="Vanilla"></option>
</datalist>

这样，在使用 input 输入内容的同时，还能选择预定义的值，当然，任意输入也是可以的。

datalist 的应用

如果只是一个预定义提示，那看起来不够吸引人呀，还能挖掘出来什么功能呢？让我们想想

相信大家在输入邮箱时，有遇到过输入账号的同时，出现一个列表，里面是输入的值加上常见的几种邮箱后缀名。那么，这种功能和 datalist 会有什么关系呢？

其实这里的实现，是可以用 datalist 来模拟，如下格式的 HTML

<input type="email" id="email" list="emailList" name="off_autocomplete" autofocus />
<datalist id="emailList">
    <option value="*@qq.com"></option>
    <option value="*@163.com"></option>
    <option value="*@gmail.com"></option>
    <option value="*@yahoo.com.cn"></option>
    <option value="*@126.com"></option>
</datalist>

其中，option 的 value 值，那个 * 是占位符，当文本输入框输入值时，将其替换为输入的值，那么就可以实现上图中的效果了。比如输入框输入了 helloworld，那么 datalist 的 option 就变成了

<datalist id="emailList">
    <option value="helloworld@qq.com"></option>
    <option value="helloworld@163.com"></option>
    <option value="helloworld@gmail.com"></option>
    <option value="helloworld@yahoo.com.cn"></option>
    <option value="helloworld@126.com"></option>
</datalist>

由于前缀都一样，所以就能匹配并呈现出来上图中的效果了。

文档信息

Search

    Table of Contents