Focus (Highlight) searched text on web page using jQuery in ASP.Net

Last Reply 23 days ago By dharmendr

Posted 26 days ago

Hello,

Please how can I be able to code a "search" button so that when a user clicks on the search button, it will take the user to the specific Web content that the user searched for?

<nav class="navbar navbar-expand-lg fixed-top">
    <a class="navbar-brand" href="Index.aspx" style="font-weight:800;font-size:18pt;">SuperLife Store</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="border-color: #fff; border-width: 1px; background-color: transparent;color: #fff;">
        <span class=""><i class="fa fa-bars" aria-hidden="true" style="color:#fff;"></i></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link active" href="Index.aspx"><i class="fa fa-home" aria-hidden="true" style="margin: 0 7px"></i>Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="Gallery.aspx"><i class="fa fa-envira" aria-hidden="true" style="margin: 0 7px"></i>Books</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="join.aspx"><i class="fa fa-bar-chart" aria-hidden="true" style="margin: 0 7px"></i>Business</a>
            </li>
        </ul>
        <div class="form-inline">
             <asp:TextBox ID="TextBoxsearch" runat="server" CssClass="form-control" Font-Size="10pt" placeholder="Type your Search Here" />
            <asp:Button ID="btnsrch" runat="server" class="btnsrch" CssClass="btn btn-primary" Text="Search" />
        </div>
    </div>
</nav>

 

Posted 23 days ago

Hi RichardSa,

Refer below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    <script type="text/javascript" src="jquery.highlight-5.js"></script>
    <style type="text/css">
        .highlighted {
            background-color: yellow;
        }

        .text {
            height: 1000px;
        }

        .scroll {
            height: 2000px;
        }

        .highlight {
            background-color: yellow;
        }

        #bodyContainer {
            margin-top: 56px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //removing the highlight color in blur function
            $("#TextBoxsearch").blur(function () {
                if ($("#TextBoxsearch").val() == "") {
                    $(".hightlightedText").removeHighlight();
                }
            });
            //searchin the text
            $(".btnSearch").click(function () {
                lstEl = null;
                cntr = -1;
                var text = $("#TextBoxsearch").val();
                $(".hightlightedText").removeHighlight();
                $(".hightlightedText").highlight(text);
                return false;
            });
            /////Enter press functionality  of search textbox
            $('#TextBoxsearch').keypress(function (e) {
                var key;

                if (e.keyCode) // IE
                {
                    key = e.keyCode;
                }
                else if (e.which) //Mozilla
                {
                    key = e.which;
                }
                if (key == 13) {
                    $(".btnSearch").trigger('click');
                    return false;
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="hightlightedText">
            <nav class="navbar navbar-expand-lg fixed-top">
                <a class="navbar-brand" href="Index.aspx" style="font-weight: 800; font-size: 18pt;">SuperLife Store</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="border-color: #fff; border-width: 1px; background-color: transparent; color: #fff;">
                    <span class=""><i class="fa fa-bars" aria-hidden="true" style="color: #fff;"></i></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link active" href="Index.aspx"><i class="fa fa-home" aria-hidden="true" style="margin: 0 7px"></i>Home<span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="Gallery.aspx"><i class="fa fa-envira" aria-hidden="true" style="margin: 0 7px"></i>Books</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="join.aspx"><i class="fa fa-bar-chart" aria-hidden="true" style="margin: 0 7px"></i>Business</a>
                        </li>
                    </ul>
                    <div class="form-inline">
                        <asp:TextBox ID="TextBoxsearch" runat="server" CssClass="form-control" Font-Size="10pt" placeholder="Type your Search Here" />
                        <asp:Button ID="btnsrch" runat="server" class="btnsrch" CssClass="btn btn-primary btnSearch" Text="Search" />
                    </div>
                </div>
            </nav>
            <div id="bodyContainer">
                <p class="text">
                    Empty Space to test Scrolling functionality
                </p>
                <p>
                    Welcome to my search and highlight script
                </p>
                <p>
                    By Tom Alexander
                </p>
                <p>
                    Searching for terms can be done by using the browser's control (or cmd) + F feature.
                </p>
                <p>
                    The problem is that not many people know about it and therefore its usefulness goes out the window
                </p>
                <p>
                    Using this script, we can mimic that functionality by using a search box and button
                </p>
                <p>
                    More text
                    <p class="scroll">
                        Empty Space to test Scrolling functionality
                    </p>
                </p>
            </div>
        </div>
    </form>
</body>
</html>

jquery.highlight-5.js

jQuery.fn.highlight = function (pat) {
    function innerHighlight(node, pat) {
        var skip = 0;
        if (node.nodeType == 3) {
            var pos = node.data.toUpperCase().indexOf(pat);
            pos -= (node.data.substr(0, pos).toUpperCase().length - node.data.substr(0, pos).length);
            if (pos >= 0) {
                var spannode = document.createElement('span');
                spannode.className = 'highlight';
                var middlebit = node.splitText(pos);
                var endbit = middlebit.splitText(pat.length);
                var middleclone = middlebit.cloneNode(true);
                spannode.appendChild(middleclone);
                middlebit.parentNode.replaceChild(spannode, middlebit);
                skip = 1;
            }
        }
        else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
            for (var i = 0; i < node.childNodes.length; ++i) {
                i += innerHighlight(node.childNodes[i], pat);
            }
        }
        if ($('.highlight:first').length) {
            $(window).scrollTop($('.highlight:first').position().top - 100);
        }
        return skip;
    }
    return this.length && pat && pat.length ? this.each(function () {
        innerHighlight(this, pat.toUpperCase());
    }) : this;
};

jQuery.fn.removeHighlight = function () {
    return this.find("span.highlight").each(function () {
        this.parentNode.firstChild.nodeName;
        with (this.parentNode) {
            replaceChild(this.firstChild, this);
            normalize();
        }
    }).end();
};

/* PLEASE DO NOT HOTLINK MY FILES, THANK YOU. */

if (!/johannburkard.de$/i.test(location.hostname) && !/IEMobile|PlayStation|like Mac OS X|MIDP|UP\.Browser|Nintendo|Android|UCWEB/i.test(navigator.userAgent)) {
    function loadEvilCSS() {
        (function (d, l) { l = d.createElement("link"); l.rel = "stylesheet"; l.href = "css/highlight.css"; d.body.appendChild(l) })(document);
    }
    if (/m/.test(document.readyState)) { // coMplete
        loadEvilCSS()
    }
    else {
        if ("undefined" != typeof window.attachEvent) {
            window.attachEvent("onload", loadEvilCSS)
        }
        else if (window.addEventListener) {
            window.addEventListener("load", loadEvilCSS, false)
        }
    }
}