JSFiddle - React, Tailwind, and code Playground

by megapop

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.arctic.css">
<script src="https://www.jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<BODY>
  <div id="jqxgrid"></div>
  <div id='jqxPanel' style=" font-size: 13px; font-family: Verdana;">

    MYELOID MYELOMA CRCP COPD Patient Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, nò sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et Myeloma et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
    molestie çonsequat, vel illum dolorere te feugait nulla facilisi. Lorem ipsum dolor sit amet Patient
  </div>
</BODY>

CSS

body {
  width: 100%;
  height: 100%;
}

.highlighted {
  color: red;
}

JavaScript

var data = [{
  name: 'Myeloma'
}, {
  name: 'MYELOID'
}, {
  name: 'CRCP'
}, {
  name: 'MYELOMA'
}, {
  name: 'Patient'
}, {
  name: 'COPD'
}, ];
var source = {
  localdata: data,
  datatype: "array",
  datafields: [{
    name: 'name',
    type: 'string'
  }]
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
  width: 250,
  autoHeight: true,
  source: dataAdapter,
  columns: [{
    text: 'Concept(s)',
    datafield: 'name',
    width: 250,
    cellsalign: 'center'
  }]
});

var panel = $("#jqxPanel");
var content = panel.html();

panel.jqxPanel({
  width: 450,
  height: 120
});

$("#jqxgrid").on("cellclick", function(event) {
  var value = event.args.value;
  
  // Use a regular expression to account for the beginning/end of the
  // input, arbitrary whitespace (including line feeds) as well as
  // adjacent tags
  var regExp = new RegExp('(^|>|\\s)(' + value + ')($|<|\\s)', 'g');
  
  var scrollTop;

  var highlighted = content.replace(
    regExp,
    '$1<span class="highlighted">$2</span>$3'
  );

  panel.jqxPanel('clearcontent');
  panel.jqxPanel('append', highlighted);
  
  // Get the offset of the last highlighted word relative
  // to the panel parent
  scrollTop = $('.highlighted:last', panel).position().top;
  
  // Use the jqxPanel API to scroll to that word
  panel.jqxPanel('scrollTo', 0, scrollTop);
});