JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<!--script src="./script.js"></script-->

<span>Reporting Entity</span>
<select id="tableHeader" class="select2" >

</select>
<br>

<span>Comparator</span>
<select id="tableBody" class="select2 select2-multiple" multiple="multiple" data-placeholder="Choose">
 
</select>
<label id="message">test</label>

CSS

.active {
    background-color: green;
    margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 0px; 
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

JavaScript

$(document).ready(function() {

  var data = [
    {text:"Canada",id:"Canada",level:1,isActive:1},
    {text:"Newfoundland and Labrador<sup>er</sup>",id:"Newfoundland and Labrador",level:2,isActive:1},
    {text:"Central Health",id:"Central Health",level:3,isActive:0},
    {text:"Eastern Health",id:"Eastern Health",level:3,isActive:1},
    {text:"Labrador-Grenfell Health",id:"Labrador-Grenfell Health",level:3,isActive:1},
    {text:"Western Health",id:"Western Health",level:3,isActive:1},
    {text:"Prince Edward Island",id:"Prince Edward Island",level:2,isActive:1},
    {text:"Nova Scotia",id:"Nova Scotia",level:2,isActive:0},
    {text:"Central Zone (N.S.)",id:"Central Zone (N.S.)",level:3,isActive:0},
    {text:"Eastern Zone",id:"Eastern Zone",level:3,isActive:1},
    {text:"Northern Zone",id:"Northern Zone",level:3,isActive:1},
    {text:"Western Zone",id:"Western Zone",level:3,isActive:1},
    {text:"New Brunswick",id:"New Brunswick",level:2,isActive:1}
  ];


  // this function to search and show matched input
  function matchCustom(params, data) {
    if ($.trim(params.term) === '') {
      return data;
    }
    if (typeof data.text === 'undefined') {
      return null;
    }
    if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) > -1) {
      var modifiedData = $.extend({}, data, true);
      modifiedData.text += '';
      return modifiedData;
    }
    return null;
  }

  function formatResult(node) {
    var $result = $('<div class="active"><span style="padding-left:' + (20 * node.level) + 'px;">' + node.text + '</span></div>');
    return $result;
  };


  function formatResultWithCheckBox(node) {
    var $check = $(`<input type="checkbox" id="check${node.text.replace(" ", "")}"/>`);
    var $result = $('<span style="padding-left:' + (20 * node.level) + 'px;">&nbsp;&nbsp;' + node.text + '</span>');
    if (node.element) {
      $result.prepend($check);
      $check.prop("checked", node.element.selected);
      
      if...