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