HTML5 中新的datalist 自動下拉提示輸入框

在日常的頁面制作中，為了方便用戶輸入，經常可以在一個輸入文本框中，當用戶輸入內容時，自動下拉提示建議用戶的輸入，這叫autocomplete或者autosuggestion功能，這樣能加快用戶的輸入，目前的做法是通過ajax去實現，比如通過DWR等，這方面的資料很多的。

而HTML5中，新增加了datalist這個標簽，其實也是可以滿足在前端達到同樣的功能，例子如下：

1. <input type="text" value="" list="fruits" />   
2. <datalist id="fruits">   
3.   <option value="Apple"></option>    
4.   <option value="Orange"></option>    
5.   <option value="Peach"></option>    
6. </datalist>  

這樣的代碼運行後，當用戶在文本輸入框輸入內容時，就會下拉提示三種水果， 建議用戶輸入，如果擔心浏覽器兼容問題，可以嘗試用如下代碼：

1. <datalist id="fruits">   
2.   Pick your favorite fruit   
3.   <select name="fruit_sel">   
4.   <option value="Apple">Apple</option>    
5.   <option value="Orange">Orange</option>    
6.   <option value="Peach">Peach</option>    
7.   </select>   
8.   or type one.   
9. </datalist>   
10. <input type="text" name="fruit" value="" list="fruits" />