Fe-interview: [html] 第159天 举例说明如何使用纯html怎么实现下拉提示的功能？

Created on 21 Sep 2019  ·  4Comments  ·  Source: haizlin/fe-interview

第159天 举例说明如何使用纯html怎么实现下拉提示的功能？

html
Source
picture haizhilin2013

Most helpful comment

  • datalist标签

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <label for="favorite_team">Favorite Team:</label>
    <!-- 注意input的list属性与datalist的id属性进行绑定 -->
    <input type="text" name="team" id="favorite_team" list="team_list" autocomplete="off">
    <datalist id="team_list">
        <!-- 指定了value值之后，value和innerHTML类似于标题与副标题之间的关系，选中后input的值是value -->
        <option value="A">Aus Tigers</option>
        <option value="B">Detroit Lions</option>
        <option value="C">Detroit Pistons</option>
        <option value="D">Detroit Red Wings</option>
        <option value="E">Detroit Tigers</option>
    </datalist>
</datalist>
</body>

</html>
picture vkboo on 22 Sep 2019
👍2

All 4 comments

所以怎么做

Martin730913 picture Martin730913 on 22 Sep 2019

真没想到，只是都忘记了datalist。使用h5的datalist可以实现。缺点是ie和Safari不支持

xuesongcc picture xuesongcc on 22 Sep 2019
👍1

  • datalist标签

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <label for="favorite_team">Favorite Team:</label>
    <!-- 注意input的list属性与datalist的id属性进行绑定 -->
    <input type="text" name="team" id="favorite_team" list="team_list" autocomplete="off">
    <datalist id="team_list">
        <!-- 指定了value值之后，value和innerHTML类似于标题与副标题之间的关系，选中后input的值是value -->
        <option value="A">Aus Tigers</option>
        <option value="B">Detroit Lions</option>
        <option value="C">Detroit Pistons</option>
        <option value="D">Detroit Red Wings</option>
        <option value="E">Detroit Tigers</option>
    </datalist>
</datalist>
</body>

</html>
vkboo picture vkboo on 22 Sep 2019
👍2

利用纯 html 需要使用 datalist 标签。input 的 list 与 datalist 的 id 进行绑定后，在输入时可以选择下拉选项，在输入到匹配的关键字时也能自动提示。

示例代码： https://codepen.io/Konata9/pen/GRKeroR?editors=1100

Konata9 picture Konata9 on 25 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments