Web前端 既可以輸入又可以選擇的input框

2021-07-08 11:54:31 字數 708 閱讀 9896

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

廢話就到此為止

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

其實在html5中,有這樣乙個屬性的input框 叫做 datalist

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

具體**如下

ps:這裡的list一定要跟datalist id 一致哦 

這段**實現了下列效果如圖:

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

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

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

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

只遍歷資料 逐一賦值給即可

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

具體**給個demo吧

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

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

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

哈哈哈

VB 的元件既可以擁有使用者介面

vb 的中心思想就是要便於程式設計師使用,無論是新手或者專家。vb使用了可以簡單建立應用程式的gui 系統,但是又可以開發相當複雜的程式。vb 的程式是一種基於窗體的視覺化元件安排的聯合,並且增加 來指定元件的屬性和方法。因為預設的屬性和方法已經有一部分定義在了元件內,所以程式設計師不用寫多少 就可...

氣泡排序既可以排字串也可以排字串

編寫乙個氣泡排序,既可以編寫字串也可以編寫數字。1 需要實現乙個函式指標,在排序的時候將函式的入口位址傳進來。void sort void base,int len,int width,int cmp const void const void 實現 的主邏輯 1 引數設定,乙個可以接收任何型別的指...

動態規劃 雙11既可以薅羊毛還能花錢最少

的 雙十一 購物節有各種 活動,比如 滿 200 元減 50 元 假設你的購物車中有 n 個 n 100 想買的商品,希望從裡面選幾個,在湊夠滿減條件的前提下,讓選出來的商品 總和最大程度地接近滿減條件 200 元 這樣就可以極大限度地 薅羊毛 我們假設購物滿w元才能減。例如滿500減200,那w ...