JSFiddle - React, Tailwind, and code Playground

by naveennsit

HTML

<script src="http://lab.cubiq.org/iscroll/src/iscroll.js"></script>
<div data-role="page" id="realTimeScreen" > 
    <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">

        <h1 class="ui-title"  id="heading" style="text-align:left;margin-left: 20px;" ></h1>
        <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
            <a ><img src="img/Follow-Realtime.png" class="follow_h"id=""/></a>
            <a><img src="img/Stop-Realtime.png" id="" class="stop_h"/></a>
            <a><img src="img/Email-Document.png" id="" class="email_h"/></a>
            <a><img src="img/search.png" id="" class="search_h" /></a>
            <a><img src="img/zoom-in.png" id="" class ="zoomIn_h"/></a>
            <a><img src="img/Export-Realtime.png" id="" class="exportRealTime_h"/></a>
        </div>
    </div>
    <div class="ui-grid-c" id="searchbar"  style="" class="searchContend_h" >
    <input name="text-12" id="text-12" value="" type="text" autocorrect="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 data-role="fieldcontain" class="sliderContend_h" style="display: none; padding-top:10px;" id ="sliderDiv">

                             <input type="range" name="slider-2" id="slider-2" value="15" min="15" max="25"  class="slider_h" data-highlight="true" />
                             
                         </div>
        <div id="wrapper">
        <div id="scroller">
            
          Sachin Ramesh Tendulkar AM (Listeni/səˈtʃɪn tɛnˈduːlkər/; born 24 April 1973)[1] is an Indian cricketer widely acknowledged as one of the greatest batsmen in cricket.[2]...

CSS

#wrapper {

    position:absolute;

    z-index:1;

    top:145px;

    bottom:48px;

    left:0;

    width:100%;

    height:500px;

    overflow:auto;

}

#scroller {

    position:absolute;

    z-index:1;

    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);

    width:100%;

    padding:0;

}
 .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;
     /* 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;
 }

JavaScript

$(document).on('click', '.search_h', function() {

   $("#searchbar").toggle("slow");
});


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

$(document).ready(function () {
    $('.searchbox').on('change', function () {
        if ($(this).val() === '') {
            var selector = "#scroller";
            $(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 = "#scroller";
        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 () {


        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 = "#scroller";
        $(selector + ' span.match').each(function () {
         ...