在Jqgrid上，用js实现搜索关键字并且高亮显示的功能

！申明此方法参考过比人写的，但是忘记链接了。。。。。

近日，接到需求需要在Jqgird上，增加一个搜索功能，以达到搜索高亮显示的功能。

直接上代码。

1、前端HTML代码

        <div class="txt_box">
            <div id="search_box">
                <input id="searchstr" placeholder="请输入关键字"  />
                <img id="search_btn" src="~/img/sou.png"/>
            </div>
        </div>
        <table id="ghwcs"></table>

ghwcs 就是我的jqgrid，顶部加了搜索框，为了代码简洁明了，这里将样式都删除了。

search_box 就是我搜索框。

前端搜索框效果如下：

2、js代码

触发函数代码，这里为了方便 ，不仅可以点击搜索图来，还增加了    回车键搜索，highlight就是关键的函数：

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

 

3、关键函数

关键highlight函数：

           function highlight() {
                clearSelection();//先清空一下上次高亮显示的内容；

                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 = $("#ghwcs").text();
                if (!regExp.test(content)) {
                    showTips("没有找到要查找的数据", _searchTop, 3, _searchLeft);
                    return;
                } else {
                    if (sCurText != searchText) {
                        i = 0;
                        sCurText = searchText;
                    }
                }

                $('table td').each(function () {
                    var html = $(this).html();
                    var newHtml = html.replace(regExp, '<span class="highlight">' + searchText + '</span>');//将找到的关键字替换，加上highlight属性；

                    $(this).html(newHtml);//更新；
                    flag = 1;
                });


            }

 

4、辅助函数

清除上一次选中的方法clearSelection：

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

提示框辅助函数 showTips：

         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));
            }

5、实现效果

这是未查到的提示框 showTips 以及提示。

查到的显示：