JSFiddle - React, Tailwind, and code Playground

by ravi1989

HTML

<div class="ui-grid-c" id="searchbar"  style=" " class="searchContend_h" >
    <input name="text-12" id="text-12" value="" type="text" autocorrect="off" autocapitalize="off" class="searchbox" > <a href="#" data-role="button" data-corners="false" data-inline="true" class="search">Search</a>
 <a href="#" data-role="button" data-corners="false" data-inline="true" id="next" class="searchNext" disabled>Next</a>
 <a href="#" data-role="button" data-corners="false" data-inline="true" id="prev" class="searchPrev" disabled>Previous</a>

</div>
    
    <div id="realTimeContents" >
  dfgdfgdf 
        <br>
 bdfsfdsg
            <br>
ipiopixdgfdfh
                <br>
ipiopixdgfdfh
                             
           
</div>

CSS

.highlighted {
            background-color:blue;
            padding:1px 2px;
            margin:0 -2px;
            border-radius: 5px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
        }
        .highlight {
            background-color: #fff34d;
            -moz-border-radius: 5px;
            
            -webkit-border-radius: 5px;
            
            border-radius: 5px;
            
            -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
            
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
            
        }
        .highlight {
            padding:1px 4px;
            margin:0 -4px;
        }

JavaScript

var searchIndex = -1;
var searchTermOld = '';

$(document).ready(function () {
    $('.searchbox').on('change', function () {
        if ($(this).val() === '') {
            var selector = "#realTimeContents";
            $(selector + ' span.match').each(function () {
                $(this).replaceWith($(this).html());
            });
        }
        searchIndex = -1;
        $('.searchNext').attr("disabled", "disabled");
        $('.searchPrev').attr("disabled", "disabled");
        searchTermOld = $(this).val();
    });
    $('.searchbox').on('keyup', function () {

        var selector = "#realTimeContents";
        if ($(this).val() === '') {
            $(selector + ' span.match').each(function () {
                $(this).replaceWith($(this).html());
            });
        }
        if ($(this).val() !== searchTermOld) {
            $(selector + ' span.match').each(function () {
                $(this).replaceWith($(this).html());
            });
            searchIndex = -1;
            $('.searchNext').attr("disabled", "disabled");
            $('.searchPrev').attr("disabled", "disabled");
        }
    });
    $('.search').on('click', function () {

       //   $("#realTimeContents br").remove();
        if (searchIndex == -1) {
            var searchTerm = $('.searchbox').val();
            if (searchTerm == '') {
                alert("Please Insert Text.")
                return;
            }
            searchAndHighlight(searchTerm);
        } else searchNext();
        if ($('.match').length > 1) {
            $('.searchNext').removeAttr("disabled");
            $('.searchPrev').removeAttr("disabled");
        }
    });
    $('.searchNext').on('click', searchNext);

    $('.searchPrev').on('click', searchPrev);
});

function searchAndHighlight(searchTerm) {
    if (searchTerm) {
        var searchTermRegEx, matches;
        var selector = "#realTimeContents";
        $(selector + ' span.match').each(function () {
           ...