又是一週，以前總說碼農碼農現在才理解為什麼這個職業剛開始就是搬磚的了

廢話就到此為止

今天給大家說一下如何利用HTML5特性寫一個既可以輸入又可以選擇的輸入框

其實在HTML5中，有這樣一個屬性的Input框 叫做 Datalist

顧名思義就是利用已有的Data為使用者提供選擇項

具體程式碼如下

<input list="companys"/>
<datalist id="companys">
  <option value="Apple">
  <option value="Microsoft">
  <option value="Github">
</datalist>

PS:這裡的list一定要跟Datalist id 一致哦 
這段程式碼實現了下列效果如圖：

還可以實現自動補全功能哦.

 作者用這種方法替代了JQuery的Autocomplete功能但是不建議這麼做因為機制不同

php渲染頁面需要很長時間 對於大資料量的還是建議autocomplete哈，如果有更好的方法

歡迎留言

對於後端來說這裡筆者以PHP 舉例 

只遍歷資料 逐一賦值給<option value>即可

但還是那句話：少量資料建議這麼做

具體程式碼給個Demo吧

簡單實用的小技巧分享給大家把 

還是那句話 希望能幫到大家

PS 本人就是一隻菜雞 所以慢慢提升技術含量再給大家寫深度好文吧 

哈哈哈