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 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
JavaScript获取路径设计源码
May 22 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
如何理解Vue简单状态管理之store模式
May 15 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 GUID生成函数和类
2014/03/10 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python三级菜单的实例
2017/09/13 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
北大研究生linux应用求职信
2013/10/29 职场文书
教师实习自我鉴定
2013/12/14 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
银行实习推荐信
2015/03/27 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
护理心得体会范文
2016/01/22 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
golang中的并发和并行
2021/05/08 Golang
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技