datalist 標簽定義選項列表。datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。

 !DOCTYPE HTML  html  body  input list= cars /  datalist id= cars  option value= BMW  option value= Ford  option value= Volvo  /datalist  /body  /html 

效果：

 !DOCTYPE html  html  head  title HTML5 datalist tag /title  meta charset= utf-8  /head  瀏覽器版本： input list= words  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 

代碼如上，配合 input 標簽的list屬性，將 datalist 作為提供的數據集，寫起來和下拉列表很像，只不過有自動提示功能。兼容性如下：

Chrome/Firefox/Opera和IE10+均已支持，Safari直到版本7仍然不支持。

一、datalist標簽的使用示例

 !DOCTYPE html  html  head  title HTML5 datalist tag /title  meta charset= utf-8  /head  瀏覽器版本： input list= words  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值，如下代碼：

 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，表示輸入字段是否應該啟用自動完成功能，如下代碼所示：

 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下拉文本框的同時，提供給用戶能輸入普通文本的文本框，如下代碼：

 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）不能將其與服務端的數據源綁定

以上就是html datalist 標簽的使用詳解的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。