HTML表單輸入輔助:datalist 元素與 list 屬性

HTML5 支援相當多的輸入輔助功能,datalist 元素即是其中之一,當你想要提供使用者輸入操作的提示清單,可以透過 input 元素支援的 list 屬性來完成,先來看此功能的效果,在以下的輸入方塊中點兩下,會出現預先設定好的城市名稱清單:




如果輸入特定的值,例如 C ,則 C 開頭的值會顯示在清單中,選取欲輸入的城市即可。

list 屬性支援資料清單的設定,其屬性值關聯至一個預先設定好的資料清單,當這個屬性完成設定,使用者於其中輸入資料時,清單就會顯示出來,而資料清單則由 datalist 元素負責處理,設定如下:

<datalist id="cityList">
    <option value="台北市" >
    <option value="新北市">
    <option value="台中市">
    <option value="台南市">
    <option value="高雄市">
   
</datalist>

其中的資料項目由 option 元素表示,完成這個清單之後,還必須設定 id 屬性,這個屬性值被指定給 input 元素的 list 屬性,如此一來,此 datalist 當中的 option 項目將成為 input 預設的資料輸入清單,設定如下式:

<input type="text" list="cityList"  />

完成這裏的設定,其中的 input 元素就會在使用者輸入時,顯示可用的資料清單,當你輸入部份的資料時,資料清單會自動過濾並且合適的提示資料。datalist 還有另外一個 label 屬性,設定這個屬性值用以提示 option 內容的值,例如我們可以將上述的語法例子調整如下:

<datalist id="cityList">
    <option value="City-Taipei" label="台北市">
    <option value="City-New Taipei" label="新北市">
    <option value="City-Taichung" label="台中市">
   
</datalist>

如此設定之後,選單中會顯示 label 的值,而 value 則是選取之後呈現在文字方塊中的內容。



2 則留言:

匿名 提到...

非常實用!!感謝教學分享

康廷數位文教網 提到...

不過只有 Chrome 功能比較正常就是了 :p