實現js搜索匹配


搜索匹配 是在常見的搜索引擎中常用的一種技術,它能大大降低搜索耗費時間的成本

HTML5+jquery實現的搜索匹配效果,或者說是搜索過濾,當你在文本框輸入一個字符時,如果下邊的列表中有以此為開頭的內容時,將自動為你顯示相關內容

初始狀態

在這里插入圖片描述
輸入上海之后的狀態
在這里插入圖片描述

關鍵代碼:
在這里插入圖片描述

實驗總結

在輸入框上注冊keyup事件,然后在事件中獲取我實現定義的data對象數組(一般實時數據通過ajax獲取json對象)。取得數據后,在下方區域就可以顯示數據了,當我們點擊每一項的時候,就可以響應事件。同時根據索引值來調整背景高亮。

 

 

轉載:

https://blog.csdn.net/qq_40452803/article/details/89455773


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM