HTML5 支援相當多的輸入輔助功能,datalist 元素即是其中之一,當你想要提供使用者輸入操作的提示清單,可以透過 input 元素支援的 list 屬性來完成,先來看此功能的效果,在以下的輸入方塊中點兩下,會出現預先設定好的城市名稱清單:
如果輸入特定的值,例如 C ,則 C 開頭的值會顯示在清單中,選取欲輸入的城市即可。
list 屬性支援資料清單的設定,其屬性值關聯至一個預先設定好的資料清單,當這個屬性完成設定,使用者於其中輸入資料時,清單就會顯示出來,而資料清單則由 datalist 元素負責處理,設定如下:
其中的資料項目由 option 元素表示,完成這個清單之後,還必須設定 id 屬性,這個屬性值被指定給 input 元素的 list 屬性,如此一來,此 datalist 當中的 option 項目將成為 input 預設的資料輸入清單,設定如下式:
完成這裏的設定,其中的 input 元素就會在使用者輸入時,顯示可用的資料清單,當你輸入部份的資料時,資料清單會自動過濾並且合適的提示資料。datalist 還有另外一個 label 屬性,設定這個屬性值用以提示 option 內容的值,例如我們可以將上述的語法例子調整如下:
如此設定之後,選單中會顯示 label 的值,而 value 則是選取之後呈現在文字方塊中的內容。
如果輸入特定的值,例如 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
張貼留言