datalist標籤小結
在Web設計中,經常會用到如輸入框的自動下拉提示,這將大大方便使用者的輸入。在以前，如果要實現這樣的功能，必須要求開發者使用一些Javascript的技巧或相關的框架進行ajax呼叫，需要一定的程式設計工作量。但隨著HTML5 的慢慢普及，開發者可以使用其中的新的DataList標記就能快速開發出十分漂亮的 AutoComplete元件的效果
一、datalist標籤的使用示例
HTML 程式碼 複製
<!DOCTYPE html> <html> <head> <title>HTML5 datalist tag</title> <meta charset="utf-8"> </head> <p> 瀏覽器版本：<input list="words"> </p> <datalist id="words"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> <option value="Sogou"> <option value="Maxthon"> </datalist> </body> </html>
datalist提供一個事先定義好的列表，通過id與input關聯，當在input內輸入時就會有自動完成（autocomplete）的功能，使用者將會看見一個下拉列表供其選擇。
效果如下
要注意的是IE 10和Opera 中，不需要使用者必須輸入一個字元才看到下拉的建議列表，而其他瀏覽器需要使用者至少輸入一個字元才能看到效果。
二、Datalist中，同樣可以為每一個下拉列表選項指定一個value值，如下程式碼：
HTML 程式碼 複製
<label for="state">State:</label> <input type="text" name="state" id="state" list="state_list"> <datalist id="state_list"> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> </datalist>
如果在option中一旦指定了value的值，則使用者通過下拉列表選擇後，文字框中顯示的將會是value的值，如下圖：
三、Autocomplete屬性
該屬性可以設定為on或off，表示輸入欄位是否應該啟用自動完成功能，如下程式碼所示：
HTML 程式碼 複製
<form> <!-- 如果設定了autocomplete屬性，則將會繼承父元表單元素中autocomplete的值得， 如果也沒設定，則預設autocomplete為on，這裡沒進行任何設定，所以firstName的autocomplete屬性為on --> <input type="text" name="firstName"> <!-- autocomplete設定為on,瀏覽器將記憶下使用者每次輸入的值 --> <input type="text" name="address" autocomplete="on"> <!-- 設定為off，代表瀏覽器將不記憶使用者在該文字框本次的輸入，也不進行建議提醒 --> <input type="text" name="secret" autocomplete="off"> </form>
要注意的是，在opera瀏覽器中，如果設定autocomplete為off，則根本不顯示datalist,而在其他瀏覽器中，是會顯示datalist的，只不過失去自動建議提醒功能。
四、什麼時候該使用DataList
要注意的是，使用這種下拉的智慧提示框也要注意場合。比如在一些要選擇不是太多的場景下，使用一般的下拉框其實就可以了。而如果在需要使用者在很多資料中去選擇，則可以建議使用Datalist下拉建議提示框，因為可以方便使用者快速檢索去選擇。
五、如何應對不支援的瀏覽器
在寫本文的時候，依然只有IE 10,Firefox 4+,Chrome 20+和Opera是支援datalist的，這意味著不少舊版本的瀏覽器的使用者不能使用datalist的功能，但辦法總是有的，下面分別介紹一個折衷的辦法
datalist中巢狀使用傳統的select下拉選擇框
一個不錯的解決方法，是在提供傳統的select下拉文字框的同時，提供給使用者能輸入普通文字的文字框，如下程式碼：
HTML 程式碼 複製
<label for="country">Country:</label>
<datalist id="country_list">
<select name="country">
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option> <option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<!-- more -->
</select>
If other, please specify:
</datalist>
<input type="text" name="country" id="country" list="country_list"> 在上面的程式碼中，在datalist中嵌套了傳統的select下拉文字框，而input文字框中依然綁定了datalist，這樣的好處是，當在不支援datalist的瀏覽器中執行的時候會有上圖的效果：一邊是下拉選擇，另外的是可以允許使用者輸入下拉列表中不存在的記錄。而上面的程式碼如果在支援datalist的瀏覽器中執行，則是原來的只顯示一個datalist的效果。
六、Datalist的限制
當然，Datalist也有限制和不足之處，體現在：
1）不能使用CSS去隨意控制或改變其下拉建議列表中的項
2）不能控制datalist的位置
3) 不能控制每次當用戶輸入多少個字元後，就出現下拉建議列表
4）不能控制大小寫敏感，或當匹配什麼樣的字元就出現下拉建議列表
5）不能將其與服務端的資料來源繫結