資料清單已抵達 Chrome Canary

填寫表單時,有時聽起來很麻煩。提供使用者選擇權,但讓他們能夠自由輸入文字至關重要。使用 Chrome Canary (M20) 直接到達的 datalist 元素可輕而易舉。

使用 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」做為查詢參數。