DataList的作用是在你往input輸入框里輸入信息時，根據你敲進去的字母，自動顯示一個提示下列列表，很像百度或谷歌的搜索框的自動提示，在飛機票火車票的搜索頁面上也有這樣的效果。它是HTML5里新增的一個非常有用的元素。

?

DataList的表現很像是一個 Select 下拉列表，但它只是提示作用，并不限制用戶在input輸入框里輸入什么。 HTML5 Datalist的語法其實跟 select 下拉列表的語法幾乎完全一樣，非常的簡單！

      <label for="country_name">國家 : </label><input id="country_name" name="country_name" type="text" list="country" />
<datalist id="country">
   <option value="Afghanistan 阿富汗">
   <option value="Albania 阿爾巴尼亞">
   <option value="Algeria 阿爾及利亞">
   <option value="Andorra 安道爾共和國">
   <option value="Angola 安哥拉">
</datalist>
    

?

需要注意的是，input輸入框的 list 屬性值是 datalist 的id，這樣 datalist 才能和input輸入框關聯起來，在之前介紹 range類型 時曾見到提到過它。 datalist 自身并不顯示，只在需要配合input輸入時才會自動顯示出來。

?

下面我們來看一個實際例子，在下面的輸入框里，任意輸入幾個字母，datalist就會提示給你包含這幾個字符的英文國家名稱。

?

如果你的瀏覽器太古老，看不到上面的效果，下面的這張圖片可以讓你過一下眼癮。

這個例子用的是英文，但中文其實也一樣。你不妨自動動手試一下。非常的簡單，以前這樣的效果基本上只能用講Javascript實現，需要你有相當的javascript基本功，而現在，感謝HTML5，只需要純HTML就能達到這樣的神奇效果。

?

Datalist跟JavaSript比起來也有一些短板，比如當數據量很大時，比如上千條信息，這樣的數據量不宜全部都寫到頁面里，這時，使用Javascript動態加載會提高效率。但對于普通的應用，Datalist是完全夠用的。你認為呢？

?

原文： http://www.webhek.com/datalist/