既可以輸入也可以下拉選擇的文本框

這個效果在HTML5之前，需要模拟實作。

現在HTML5直接提供了這樣的功能，代碼執行個體如下:

<code>&lt;!doctype html&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;螞蟻部落&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>input</code> <code>list</code><code>=</code><code>"ant"</code> <code>/&gt;</code>

<code>  </code><code>&lt;</code><code>datalist</code> <code>id</code><code>=</code><code>"ant"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>option</code> <code>value</code><code>=</code><code>"螞蟻部落一"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>option</code> <code>value</code><code>=</code><code>"螞蟻部落二"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>option</code> <code>value</code><code>=</code><code>"螞蟻部落三"</code><code>&gt;</code>

<code>  </code><code>&lt;/</code><code>datalist</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

特别說明:文本框的list屬性值要和datalist的id屬性值相同。

原文釋出時間為：2017-3-24

本文作者：admin

本文來自雲栖社群合作夥伴“螞蟻部落”，了解相關資訊可以關注螞蟻部落