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" />