資料清單已抵達 Chrome Canary

Eiji Kitamura

填寫表單有時會讓人覺得麻煩。為使用者提供多個選項，同時讓他們自由輸入內容，這點十分重要。datalist 元素 (剛在 Chrome Canary (M20) 推出) 可輕鬆完成這項操作。

透過 datalist，應用程式可以定義使用者應從中選取的建議結果清單。他們可以從清單中選取選項，或輸入自由格式文字。

現場展示：

您可以在 input 元素的 list 屬性中指定 id，藉此將選項與 datalist 配對：

<input type="text" value="" list="fruits" />
<datalist id="fruits">
    <option value="Apple"></option>
    <option value="Orange"></option>
    <option value="Peach"></option>
</datalist>

datalist 廣泛用於最新版 Firefox、Opera 和 Internet Explorer 10 以上版本。因此，您不必太過擔心相容性問題，但如果想確保在各瀏覽器中運作，請嘗試下列做法：

<datalist id="fruits">
    Pick your favorite fruit
    <select name="fruit_sel">
    <option value="Apple">Apple</option>
    <option value="Orange">Orange</option>
    <option value="Peach">Peach</option>
    </select>
    or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />

如果瀏覽器支援 datalist，datalist 下方除了 option 元素之外的所有內容都會隱藏。如果您使用這個備用機制，請務必確保伺服器會同時擷取「fruit_sel」和「fruit」做為查詢參數。