【WEB：HTML】 datalist H5标签

KAI丶

于 2019-10-31 16:39:23 发布

阅读量240

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_36762765/article/details/102838700

版权

<datalist>

N天前用到了这个标签，今天无事记录一下。

菜鸟教程中使用说明：<datalist> 标签规定了 <input> 元素可能的选项列表，可以用来作为搜索提示。

简单实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5</title>
    <script src="../js/jquery/jquery-1.10.2.min.js"></script>
    <script>
        $(function () {
            var nameList = ['李白', '杜甫', '王维'];
            nameList.forEach(function (v) {
                console.log(v);
                $("#names").append('<option value="' + v + '"></option>');
            })
        })
    </script>
</head>
<body>
<div>
    <input id="name" list="names" placeholder="请输入姓名">
    <datalist id="names">
    </datalist>
</div>
</body>
</html>

效果展示：