首页 > Web开发 > 详细

jquery textSearch实现页面搜索 注意!!!!调用这个插件后,js事件绑定如,on、bind、live delegate全部失效,折腾了我一整天!!!

时间:2016-02-27 00:52:15      阅读:1036      评论:0      收藏:0      [点我收藏+]

今天我们介绍的这个插件来着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

jquery textSearch实现页面搜索 注意!!!!调用这个插件后,js事件绑定如,on、bind、live delegate全部失效,折腾了我一整天!!!

原文:http://www.cnblogs.com/caicaizi/p/5222183.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!