使用textSearch.js實現關鍵詞搜尋,並搜尋結果高亮顯示
阿新 • • 發佈:2019-01-04
引用塊內容
今天我們介紹的這個外掛來著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=函式名();