Hi josmijose100,
I have created sample that full-fill your requirement.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.highlight-5.js"></script>
<link href="css/highlight.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
//removing the highlight color in blur function
$("#txtSearch").blur(function () {
if ($("#txtSearch").val() == "") {
$(".hightlightedText").removeHighlight();
}
});
//searchin the text
$(".btnSearch").click(function () {
lstEl = null;
cntr = -1;
var text = document.getElementById('txtSearch').value;
$(".hightlightedText").removeHighlight();
$(".hightlightedText").highlight(text);
});
/////Enter press functionality of search textbox
$('#txtSearch').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>
<style type="text/css">
.highlighted
{
background-color: yellow;
}
.text
{
height: 1000px;
}
.scroll
{
height: 2000px;
}
</style>
</head>
<body class="hightlightedText">
<div id="hidesinPCHome" runat="server" class="searchBoxDivStyle searchBoxMargin searchBox">
<input type="text" id="txtSearch" placeholder="SEARCH THIS PAGE" class="searchBoxStyle text-box-height" />
<img src="../images/icon_Search.png" width="20" height="20" id="btnSearch" class="btnSearch"
title="Search" style="cursor: pointer" />
</div>
<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>
</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);
}
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)
}
}
}
highlight.css
.highlight {
background-color:yellow;
}
Screenshot
