做項目的時候,老板讓我自己封裝一個搜索功能,就類似於百度這種 輸入了字符之后,就可以自動搜索數據,而且還會出現一個下拉框供用戶選擇,我覺得我老板有問題,網上有這么多插件,不僅封裝好了,性能也做了優化,什么功能都有,他不用,一定要我用原生js寫,寫毛線寫,我內心吐槽了很久 ...
實現思路: ,html樣式結構寫好 ,點擊搜索按鈕時在這個事件方法中,獲取input中的值,調用發送ajax請求的方法,請求成功后用拼接模板字符串來渲染搜索到的商品頁面, , 歷史記錄功能 每次點擊搜索將這個值存放到一個數組中,將這個數組遍歷,遍歷中寫拼接模板字符串進行渲染到頁面, 將這個空數組在點擊事件的外邊聲明 對這個數組進行去重和截取保留后 個歷史記錄的值 我項目中要求只保留 個值 ,再給每 ...
2019-11-20 17:16 0 1664 推薦指數:
做項目的時候,老板讓我自己封裝一個搜索功能,就類似於百度這種 輸入了字符之后,就可以自動搜索數據,而且還會出現一個下拉框供用戶選擇,我覺得我老板有問題,網上有這么多插件,不僅封裝好了,性能也做了優化,什么功能都有,他不用,一定要我用原生js寫,寫毛線寫,我內心吐槽了很久 ...
...
今天呢給大家分享一下自己用原生JS做的一個百度搜索功能,下面上代碼: ...
Common.js //封裝類名 function byClassName(sClassName){ if(document.getElementsBYClassName){ return ...
實現的搜索功能: 1. 可以匹配輸入的字符串找出列表中匹配的項,列表框的高度跟隨搜索出的列表項的多少改變 2. 可以點擊某一項進行選中列表項 3. 可以按下上、下、回車鍵來控制列表項 4. 按下回車鍵時則會選中列表項 5. 點擊文本框中的下拉鍵頭時會切換下拉框的顯示/隱藏 6. 點擊 ...
searchableSelect.js (function($){ // a case insensitive jQuery :contains selector $.expr[":"].searchableSelectContains = $.expr.createPseudo ...