DataList：HTML5中的input輸入框自動提示利器

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是徹底夠用的。你認爲呢？