jquery实现网页查找功能示例分享


Posted in Javascript onFebruary 12, 2014

本文以查找车站名为例,仿12306官网查找车站售票时间页面效果,当用户输入关键字点击查找按钮或按回车键时,jQuery通过正则匹配内容,准确匹配关键字,并迅速将页面定位滚动到第一个匹配的位置,并显示相关信息(本例中附加信息为车站开始售票时间)。

HTML

页面需要放置一个输入框用来输入要查找的关键字,以及一个查找按钮,然后就是主体内容#content,里面包含着n个<p>,即每个时间段开售车票的车站名。
 

<div id="search_box"> 
    <input class="textbox" id="searchstr" type="text" size="10" name="searchstr" />  
    <input class="sbttn" id="search_btn" type="button" value="页内查找" /> 
</div> 
<div id="content"> 
    <p><strong>8:00 起售车站</strong><br /> 
安阳、白城、北京西、成都东、大庆、大庆西、东莞、东莞东、惠州、金华南、缙云、九江、兰州、丽水、临汾、南充、 
齐齐哈尔、青田、日照、山海关、汕头、松原、温州、乌兰浩特、乌鲁木齐、武昌、武义、西安、永康、运城。</p> 
    ....此处省略n个p 
</div>

CSS

简单的对页面内容进行CSS设置,其中.highlight和#tip分别用来设置查找结果高亮显示和信息提示框显示的样式效果,后面我们会介绍到。

#search_box { background: white; opacity: 0.8; text-align:right } 
#search_btn { background: #0f79be; margin-top: 6px; border-radius: 2px; border: 0px;  
width: 100px; line-height: 24px; color: white; } 
#searchstr { font-size: 14px; height: 20px; } 
.highlight { background: yellow; color: red; } 
#tip { background: #ffc; border: 1px solid #999; width: 110px; text-align: center;  
display: none; font-size: 12px; }

jQuery

首先,我们要实现一个固定div的效果,就是当页面往下拉滚动时,用于查找的输入框和按钮始终固定在页面的最顶部,方便继续查找。

 

(function($) { 
    $.fn.fixDiv = function(options) { 
        var defaultVal = { 
            top: 10 
        }; 
        var obj = $.extend(defaultVal, options); 
        $this = this; 
        var _top = $this.offset().top; 
        var _left = $this.offset().left; 
        $(window).scroll(function() { 
            var _currentTop = $this.offset().top; 
            var _scrollTop = $(document).scrollTop(); 
            if (_scrollTop > _top) { 
                $this.offset({ 
                    top: _scrollTop + obj.top, 
                    left: _left 
                }); 
            } else { 
                $this.offset({ 
                    top: _top, 
                    left: _left 
                }); 
            } 
        }); 
        return $this; 
    }; 
})(jQuery);

接着,我们调用fixDiv()。

 

$(function(){ 
    $("#search_box").fixDiv({ top: 0 }); 
});

接下来,最关键的实现查找功能。当输入关键字后,点击查找按钮或按回车键,调用查找函数highlight()。

 

$(function(){ 
    ... 
    $('#search_btn').click(highlight);//点击search时,执行highlight函数; 
    $('#searchstr').keydown(function (e) { 
        var key = e.which; 
        if (key == 13) highlight(); 
    }) 
    ... 
});

在函数highlight()需要做很多事情,1.清空上次高亮显示内容,2.隐藏并清空提示信息,3.判断输入内容为空的情况,4.获取输入的关键字,并与页面内容进行正则匹配,并用flag标记查找到结果,将查找结果高亮显示,5.根据查找结果的数量,确定提示信息的内容和位置偏移量,准确定位并显示提示信息。请看具体代码:

$(function(){ 
    ... 
    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();//获取你输入的关键字; 
        var regExp = new RegExp(searchText, 'g');//创建正则表达式,g表示全局的,如果不用g, 
                  //则查找到第一个就不会继续向下查找了; 
        var content = $("#content").text(); 
        if (!regExp.test(content)) { 
            showTips("没有找到要查找的车站",_searchTop,3,_searchLeft); 
            return; 
        } else { 
            if (sCurText != searchText) { 
                i = 0; 
                sCurText = searchText; 
             } 
        } 
        //高亮显示 
        $('p').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 _tip = $(".highlight").eq(i).parent().find("strong").text(); 
                if(_tip=="") _tip = $(".highlight").eq(i).parent().parent().find("strong").text(); 
                var _left = $(".highlight").eq(i).offset().left; 
                var _tipWidth = $("#tip").width(); 
                if (_left > $(document).width() - _tipWidth) { 
                     _left = _left - _tipWidth; 
                } 
                $("#tip").html(_tip).show(); 
                $("#tip").offset({ top: _top, left: _left }); 
                $("#search_btn").val("查找下一个"); 
            }else{ 
                var _top = $(".highlight").offset().top+$(".highlight").height(); 
                var _tip = $(".highlight").parent().find("strong").text(); 
                var _left = $(".highlight").offset().left; 
                $('#tip').show(); 
                $("#tip").html(_tip).offset({ top: _top, left: _left }); 
            } 
            $("html, body").animate({ scrollTop: _top - 50 }); 
            i++; 
            if (i > $(".highlight").size() - 1) { 
                i = 0; 
            } 
        } 
    } 
      ... 
});

上述代码中提到的clearSelection()函数用来清空高亮效果,代码如下:

 

function clearSelection(){ 
        $('p').each(function(){ 
            //找到所有highlight属性的元素; 
            $(this).find('.highlight').each(function(){ 
                $(this).replaceWith($(this).html());//将他们的属性去掉; 
            }); 
        }); 
}

最后加上showTips()函数,该函数用来显示在输入查找关键字后的查找结果提示信息。

 

$(function(){ 
    var tipsDiv = '<div class="tipsClass"></div>';  
    $( 'body' ).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 ) );  
    }  
});
Javascript 相关文章推荐
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 Javascript
Javascript实现关闭广告效果
Jan 29 Javascript
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
使用jQuery和PHP实现类似360功能开关效果
Feb 12 #Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 #Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 #Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 #Javascript
jquery ajax,ashx,json的用法总结
Feb 12 #Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 #Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 #Javascript
You might like
功能强大的PHP发邮件类
2016/08/29 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
PHP多进程编程实例详解
2017/07/19 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
使用console进行性能测试
2015/04/27 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Python input函数使用实例解析
2019/11/22 Python
Python列表解析操作实例总结
2020/02/26 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
什么是python的必选参数
2020/06/21 Python
python 常见的反爬虫策略
2020/09/27 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
优秀团员个人的自我评价
2013/10/02 职场文书
厨师岗位职责
2013/11/12 职场文书
办公室文员工作职责
2014/01/31 职场文书
电气工程自动化求职信
2014/03/14 职场文书
语文教研活动总结
2014/07/02 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
2015年国培研修感言
2015/08/01 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers