1、傳統輸入框
<label for="favorite_team">Favorite Team:</label> <input type="text" name="team" id="favorite_team" />
2、使用datalist
給input增加一個list屬性，屬性值為datalist的id值。
雙擊input或者輸入一個匹配的首字母的時候可以提供選項讓用戶選擇。
<label for="favorite_team">Favorite Team:</label> <input type="text" name="team" id="favorite_team" list="team_list" /> <datalist id="team_list"> <option>Detroit Lions</option> <option>Detroit Pistons</option> <option>Detroit Red Wings</option> <option>Detroit Tigers</option> <!-- etc... --> </datalist>
有一點要注意：可以給datalist中的option指定value值，但是指定value值后，用戶通過下拉列表選擇后，文本框中將顯示value值。
3、何時使用？
選擇不太多的場景下，使用一般的下拉就可以了。
如果需要用戶在很多數據中去選擇，則可以建議使用datalist下拉建議提示框，因為可以方便用戶快速檢索去選擇。
一個典型的場景就是對世界各個國家的選擇。
4、瀏覽器不支持怎么處理？
點我查看瀏覽器支持。
IE10+，Firefox 4+,Chrome 20+和Opera是支持datalist的，對於不支持的瀏覽器，可以優雅降級。
1）datalist中嵌套使用傳統的select下拉選擇框
在提供傳統的select下拉文本框的同時，提供給用戶能輸入普通文本的文本框。
<body > <label for="country">Country:</label> <datalist id="country_list"> <select name="country"> <option value="AF">Afghanistan</option> <option value="AX">Åland Islands</option> <option value="AL">Albania</option> <option value="DZ">Algeria</option> <option value="AS">American Samoa</option> <!-- more --> </select> If other, please specify: </datalist> <input type="text" name="country" id="country" list="country_list"> </body>
上面代碼，在datalist中嵌套了傳統的select下拉文本框，而input文本框依然綁定了datalist，這樣的好處是，當在不支持datalist的瀏覽器中運行時，一邊是下拉選擇，另外還可以允許用戶輸入下拉列表中不存在的記錄。
如果在支持datalist的瀏覽器中運行，則是原來的只顯示一個datalist效果。
2）使用jquery ui中的autocompute插件
不多說。
5、使用datalist的限制
- 不能使用css去隨意控制或改變其下拉建議列表中的項
- 不能控制datalist的位置
- 不能控制每次當用戶輸入多少個字符后，就出現下拉建議列表
- 不能將其與服務器的數據綁定
6、資源鏈接
http://developer.51cto.com/art/201306/400342_all.htm
https://developer.mozilla.org/en/docs/Web/HTML/Element/datalist