jquery textSearch实现页面搜索 注意!!!!调用这个插件后,js事件绑定如,on、bind、live delegate全部失效,折腾了我一整天!!!
今天我们介绍的这个插件来着http://www.zhangxinxu.com/wordpress/,张鑫旭的文章写得挺好的,大家有兴趣的多看看。
我们今天的这个插件叫“jquery.textSearch”,它的作用是可以页面上的关键词搜索,就像百度的搜索一样,只是它是单独在页面上搜索的。我们先看下效果图吧:
<script type="text/javascript" src="__PUBLIC__/SearchJs/jquery.textSearch-1.0.js"></script>
<script type="text/javascript">
$(function (){
var search_content = $('#phone').val()+' '+$('#user_name').val();
$(".trcontent").textSearch(search_content);
});
</script>
我们可以看到,当我们搜索关键词时,页面上就会标红出来。
先把关键词存放在数组中,
接着把HTML拆分开,变成HTML标签和文字两部分,然后再对文字进行匹配。
不知你看了这件插件,会不会跟我有同样的感觉,就是自己的正则替换觉得不好。。。
以下我提供源文件,欢迎有需要的朋友下载使用:
预览地址:http://www.163css.net/net163/cssjs/2013/03/textsearch/index.html
jquery textSearch实现页面搜索
作者:林炜贤来源:www.163css.com发表时间:(2013-04-17)
今天我们介绍的这个插件来着http://www.zhangxinxu.com/wordpress/,张鑫旭的文章写得挺好的,大家有兴趣的多看看。
我们今天的这个插件叫“jquery.textSearch”,它的作用是可以页面上的关键词搜索,就像百度的搜索一样,只是它是单独在页面上搜索的。我们先看下效果图吧:
我们可以看到,当我们搜索关键词时,页面上就会标红出来。
先把关键词存放在数组中,
接着把HTML拆分开,变成HTML标签和文字两部分,然后再对文字进行匹配。
不知你看了这件插件,会不会跟我有同样的感觉,就是自己的正则替换觉得不好。。。
以下我提供源文件,欢迎有需要的朋友下载使用:
预览地址:http://www.163css.net/net163/cssjs/2013/03/textsearch/index.html