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 相关文章推荐
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 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
星际原理概述
2020/03/04 星际争霸
农民和部队如何穿矿
2020/03/04 星际争霸
PHP6新特性分析
2016/03/03 PHP
PHP引用的调用方法分析
2016/04/25 PHP
JS与框架页的操作代码
2010/01/17 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
JavaScript面试出现频繁的一些易错点整理
2018/03/29 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
python遍历类中所有成员的方法
2015/03/18 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
自主招生自荐信格式
2013/12/03 职场文书
《难忘的泼水节》教学反思
2014/02/27 职场文书
环保标语口号
2014/06/13 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
爱国主义影片观后感
2015/06/18 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python