这个效果在HTML5之前,需要模拟实现。
现在HTML5直接提供了这样的功能,代码实例如下:
<code><!doctype html></code>
<code><</code><code>html</code><code>></code>
<code><</code><code>head</code><code>></code>
<code><</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>></code>
<code><</code><code>title</code><code>>蚂蚁部落</</code><code>title</code><code>></code>
<code></</code><code>head</code><code>></code>
<code><</code><code>body</code><code>></code>
<code> </code><code><</code><code>input</code> <code>list</code><code>=</code><code>"ant"</code> <code>/></code>
<code> </code><code><</code><code>datalist</code> <code>id</code><code>=</code><code>"ant"</code><code>></code>
<code> </code><code><</code><code>option</code> <code>value</code><code>=</code><code>"蚂蚁部落一"</code><code>></code>
<code> </code><code><</code><code>option</code> <code>value</code><code>=</code><code>"蚂蚁部落二"</code><code>></code>
<code> </code><code><</code><code>option</code> <code>value</code><code>=</code><code>"蚂蚁部落三"</code><code>></code>
<code> </code><code></</code><code>datalist</code><code>></code>
<code></</code><code>body</code><code>></code>
<code></</code><code>html</code><code>></code>
特别说明:文本框的list属性值要和datalist的id属性值相同。
原文发布时间为:2017-3-24
本文作者:admin
本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落