1. 程式人生 > >使用textSearch.js實現關鍵詞搜尋,並搜尋結果高亮顯示

使用textSearch.js實現關鍵詞搜尋,並搜尋結果高亮顯示

引用塊內容
今天我們介紹的這個外掛來著http://www.zhangxinxu.com/wordpress/,張鑫旭的文章寫得挺好的,大家有興趣的多看看。
我們今天的這個外掛叫“jquery.textSearch”,它的作用是可以頁面上的關鍵詞搜尋,就像百度的搜尋一樣,只是它是單獨在頁面上搜索的。我們先看下效果圖吧:
這裡寫圖片描述
我們可以看到,當我們搜尋關鍵詞時,頁面上就會標紅出來。
需要引用的外掛textSearch,下載地址(經過我修改後的版本):https://download.csdn.net/download/tian_tian2/10515837

實現程式碼

//html程式碼
<form> <input placeholder="請輸入編碼或者名稱" type="text" id="txtSearchKeyword" />//搜尋文字框 <span class="btn"><button type="submit" id="btn" class="btn_in w62">搜尋</button></span> </form> <p id="searchTextTest">//需要搜尋的範圍 對於程式設計師,大家想必會有這麼一個印象:生活簡單乏味,除了程式設計、吃飯、睡覺,就是上網、打遊戲或者一副邋遢、無趣、情商低還不苟言笑的樣子等等。話雖如此,也還是有越來越多的妹子把戀愛目標鎖定在程式設計師上,原因無他:呆萌又多,就像熱播劇《戀愛先生》裡的鄒北業。但如何和程式設計師相處一直是個問題,這篇文章就教你如何優(xin)雅(ji)的馴服程式猿男友。先分享2
個網友的養猿故事...... </p> //js程式碼 $("form").submit(function() { var v = $("#txtSearchKeyword").val(); $("#searchTextTest").textSearch(v); return false; });

以上幾行程式碼即可實現全域性搜尋的功能了。
註釋: 網上說,呼叫這個外掛後,js事件繫結如,on、bind、live delegate全部失效,bind、live delegate我不知道會不會失效(因為沒有試過),但是click、on是失效了的,這個時候可以採用onclick=函式名();