使用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=函数名();

猜你喜欢

转载自blog.csdn.net/tian_tian2/article/details/80896485