With Reference from this fiddle
http://jsfiddle.net/wjLmx/23/
HTML with Demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.highlighted
{
background-color: yellow;
}
.highlight
{
background-color: #fff34d;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3-4 */
border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}
.highlight
{
padding: 1px 4px;
margin: 0 -4px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function searchAndHighlight(searchTerm, selector) {
if (searchTerm) {
var selector = selector || "#realTimeContents"; //use body as selector if none provided
var searchTermRegEx = new RegExp(searchTerm, "ig");
var matches = $(selector).text().match(searchTermRegEx);
if (matches != null && matches.length > 0) {
$('.highlighted').removeClass('highlighted'); //Remove old search highlights
//Remove the previous matches
$span = $('#realTimeContents span');
$span.replaceWith($span.html());
if (searchTerm === "&") {
searchTerm = "&";
searchTermRegEx = new RegExp(searchTerm, "ig");
}
$(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>" + searchTerm + "</span>"));
$('.match:first').addClass('highlighted');
var i = 0;
$('.next_h').off('click').on('click', function () {
i++;
if (i >= $('.match').length) i = 0;
$('.match').removeClass('highlighted');
$('.match').eq(i).addClass('highlighted');
$('.ui-mobile-viewport').animate({
scrollTop: $('.match').eq(i).offset().top
}, 300);
});
$('.previous_h').off('click').on('click', function () {
i--;
if (i < 0) i = $('.match').length - 1;
$('.match').removeClass('highlighted');
$('.match').eq(i).addClass('highlighted');
$('.ui-mobile-viewport').animate({
scrollTop: $('.match').eq(i).offset().top
}, 300);
});
if ($('.highlighted:first').length) { //if match found, scroll to where the first one appears
$(window).scrollTop($('.highlighted:first').position().top);
}
return true;
}
}
return false;
}
$(document).on('click', '.searchButtonClickText_h', function (event) {
$(".highlighted").removeClass("highlighted").removeClass("match");
if (!searchAndHighlight($('.textSearchvalue_h').val())) {
alert("No results found");
}
});
</script>
</head>
<body>
<div class="searchContend_h">
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h" />
</div>
<div class="ui-block-b">
<a href="#" class="searchButtonClickText_h">Search</a>
</div>
<div class="ui-block-c">
<a href="#" class="next_h">Next</a>
</div>
<div class="ui-block-d">
<a href="#" class="previous_h">Previous</a>
</div>
<div id="realTimeContents">
aspsnippets.com
<br />
aspforums.net
<br />
jqueryfaqs.com
<br />
w3schools.com
<br />
stackoverflow.com
<br />
</div>
</div>
</div>
</body>
</html>
Demo
