文章出處

HTML5有無限可能，總是在釋出一些新鮮實用的功能，讓原生的web環境更加炫酷。

今天看到datalist 這個元素，可以用來預先定義一個輸入框的潛在選項，也就是我們在平時項目中經常用jQuery插件或者自己寫JS來實現的autocomplete「自動補全，但似乎自動提示更貼切一些」功能。

具體來說，頁面上的input還是原來的input，只是在它的下面定義一下新的datalist在其中填充觸發提示的文本,同時在該input元素上指定list屬性指向這個list。一個大概的例子大概是像下面這樣

你最喜歡的瀏覽器是： <input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

最后出來的效果又差不多是這樣的：

在線查看效果請點擊這里

沒什么特別之處，簡單得發指~

但相信大家在看了效果后跟我一樣，發現了一個不足之處，在input右邊會有向下的箭頭，這讓它看起來就像一個dropdown 或者select 「下拉框」，解決辦法是多加兩句CSS代碼來將它隱藏，但此方法只是針對webkit內核的瀏覽器進行的優化：

input::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

這樣之后出來的效果差不多成了這樣：

瀏覽器兼容性

下面的數據來自caniuse。

可以看出，遙遙領先的依然是風采依舊的Chrome，對該元素的支持全線飄綠；
同時Firefox也是毫不示弱，緊隨版本帝之后;
而其他瀏覽器情況則各不相同，正所謂性福的人都相似，不幸的人各有不幸。
Opera在邊緣瀏覽器中表現強勁，綠得很耀眼；
值得注意的是，在這場不算較量的較量中，蘋果太子Safari則是黑馬般拿到了墊底的位置，全線飄紅。這直接一舉打破IE在主流瀏覽器的各種評測中常年墊底的記錄。
而IE雖然擺脫了末位的陰影，但即使是最新的IE11也只是對Datalist元素進行了部分支持，所以要與各強勁對手比肩而受到前端開發者的青睞還有些工作要做。但留給IE翻盤的時間已經不多了，正如留給中國隊的時間一樣~