天天看點

實作js搜尋比對

搜尋比對

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

HTML5+jquery實作的搜尋比對效果,或者說是搜尋過濾,當你在文本框輸入一個字元時,如果下邊的清單中有以此為開頭的内容時,将自動為你顯示相關内容

初始狀态

實作js搜尋比對

輸入上海之後的狀态

實作js搜尋比對

關鍵代碼:

實作js搜尋比對

實驗總結

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