JSFiddle - React, Tailwind, and code Playground

by ravi1989

HTML

<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"  class="searchContend_h" style="display: none">
 <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" >Next</a>
 <a href="#" data-role="button" data-corners="false" data-inline="true" id="prev" class="searchPrev">Previous</a>

</div--> 
 <div class="searchContend_h" style="display: none">
      <div class="ui-grid-c">
      <div class="ui-block-a"  style="width: 30%;" >
        <input name="text-12" id="text-12" value="" type="text" autocorrect="off" class="searchbox">     
    </div>
    <div class="ui-block-b">
        <a href="#" data-role="button" data-corners="false"  data-inline="true"  class="search">Search</a>
    </div>
    <div class="ui-block-c" style="margin-left: 5px;">
        <a href="#" data-role="button" data-corners="false"  data-inline="true"  id="next" class="searchNext" disabled>Next</a>
    </div>
    <div class="ui-block-d" style="margin-left: 30px;">
        <a...

CSS

* {
            
            -webkit-touch-callout: none;
            
            -webkit-user-select: none;
            
        }
        input,
        textarea {
            -webkit-touch-callout: auto;
            -webkit-user-select: auto;
        }
        
 .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;
 }

.ui-datebox-dboxin .ui-block-a > input{
     background-color: white;
    color:#000;
    font-weight:bold;
}
.ui-datebox-dboxin .ui-block-b > input
{
    background-color: white;
    color:#000;
    font-weight:bold;
}
.ui-datebox-dboxin .ui-block-c > input{
    background-color: white;
    color:#000;
    font-weight:bold;
}

.caseTextArea_h {
    width: 100% !important;
    height: 60px !important;
    max-height: 60px !important;
}

.documentTextArea_h {
    width: 100% !important;
    height: 60px !important;
    max-height: 60px !important;
}

.custom-label {
    color: red;
    font-size: 20px;
}
.test {
    color: white;
    font-size: 10px;
}


div.left, div.right {
 float: left;
 padding: 10px;    
}
#realTimeContents {
   overflow-y:auto;
  -webkit-overflow-scrolling: touch;
 
}

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(){
     
  
    if(searchIndex == -1){
      var searchTerm = $('.searchbox').val();
      if(searchTerm==''){
         PG_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(){
        $(this).replaceWith($(this).html());
      });
        try {
            searchTermRegEx = new RegExp('('+searchTerm+')', "ig");
        } catch (e) {
            return false;
        }
        $('.highlighted').removeClass('highlighted');
        matches =...