相信很多小伙伴,在页面中不止一次用到过网页组合键ctrl+F的搜索功能吧,那它到底是怎么实现的呢?在一次项目中我也遇到了同样的问题,由于自己js基础甚差,索性求助于百度,几小时的搜索和整理终于劳有所获,整理了一段完整的js实现代码,贴出来,以便自己日后参考。
准备工作
首先我们要写一个CSS样式为了标记,搜索到对应的文本信息时让文字变色(本文标记为highlight)
搜索的流程:
获取搜索框的文字
获取所选要匹配内容块的所有文字
利用正则匹配 + 替换
定位:找到查找到的文本在页面上的位置,利用jquery的
animate
和scrollTop
改变滚动条
文中比较重要的选择器
.search_btn
查找按钮#searchstr
输入的搜索文本#box_div
搜索对应的文本框.highlight
搜索到的文字变色class#tip
提示结果
代码实现
### 搜索 ###
$('.search_btn').click(highlight);//点击search时,执行highlight函数;
$('#searchstr').keydown(function (e) {
var key = e.which;
if (key == 13) highlight();
})
var i = 0;
var sCurText;
function highlight(){
clearSelection();//先清空一下上次高亮显示的内容;
var flag = 0;
var bStart = true;
$('#tip').text('');
$('#tip').hide();
var searchText = $('#searchstr').val();
var _searchTop = $('#searchstr').offset().top+30;
var _searchLeft = $('#searchstr').offset().left;
if($.trim(searchText)==""){
showTips("请输入查找关键字",_searchTop,3,_searchLeft);
return;
}
//获取你输入的关键字;
var searchText = $('#searchstr').val();
//创建正则表达式,g表示全局的,如果不用g,则查找到第一个就不会继续向下查找了;
var regExp = new RegExp(searchText, 'g');
var content = $("#box_div").text();
if (!regExp.test(content)) {
showTips("没有找到要查找的关键字",_searchTop,3,_searchLeft);
return;
} else {
if (sCurText != searchText) {
i = 0;
sCurText = searchText;
}
}
### 替换 ###
$('td').each(function(){
var html = $(this).html();
//将找到的关键字替换,加上highlight属性;
var newHtml = html.replace(regExp, '<span class="highlight">'+searchText+'</span>');
$(this).html(newHtml);//更新;
flag = 1;
});
### 滚动条 ###
if (flag == 1) {
if ($(".highlight").size() > 1) {
var _top = $(".highlight").eq(i).offset().top+$(".highlight").eq(i).height();
var _left = $(".highlight").eq(i).offset().left;
var _tipWidth = $("#tip").width();
if (_left > $(document).width() - _tipWidth) {
_left = _left - _tipWidth;
}
$("#tip").offset({ top: _top, left: _left });
$("#search_btn").val("查找下一个");
}else{
var _top = $(".highlight").offset().top+$(".highlight").height();
var _left = $(".highlight").offset().left;
$('#tip').show();
}
$("html, body").animate({ scrollTop: _top - 50 });
i++;
if (i > $(".highlight").size() - 1) {
i = 0;
}
}
}
### 上次搜索标记清除 ###
function clearSelection(){
$('div').each(function(){
//找到所有highlight属性的元素;
$(this).find('.highlight').each(function(){
$(this).replaceWith($(this).html());//将他们的属性去掉;
});
});
}
### 提示框 ###
var tipsDiv = '<div class="tipsClass"></div>';
$( '#bdiv' ).append( tipsDiv );
function showTips( tips, height, time,left ){
var windowWidth = document.documentElement.clientWidth;
$('.tipsClass').text(tips);
$( 'div.tipsClass' ).css({
'top' : height + 'px',
'left' :left + 'px',
'position' : 'absolute',
'padding' : '8px 6px',
'background': '#000000',
'font-size' : 14 + 'px',
'font-weight': 900,
'margin' : '0 auto',
'text-align': 'center',
'width' : 'auto',
'color' : '#fff',
'border-radius':'2px',
'opacity' : '0.8',
'box-shadow':'0px 0px 10px #000',
'-moz-box-shadow':'0px 0px 10px #000',
'-webkit-box-shadow':'0px 0px 10px #000'
}).show();
setTimeout( function(){$( 'div.tipsClass' ).fadeOut();}, ( time * 1000 ) );
}
})
总结
遇到问题的时候,网上虽说有大把的资料和代码可以copy,但是自己在copy的时候,也要把别人写的代码摸透彻,知道每一步是做什么的,有什么作用。最好是做一个记录,也方便以后用的时候一下就能用最快的方法使用它。
前端的技术还是需要去学习的,毕竟一个只会后端的PHP不是一个好PHP。要做一个好的PHP。