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 則是選取之後呈現在文字方塊中的內容。