JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.7.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <link data-require="select2@*" data-semver="3.5.1" rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.4.5/select2.css" />
  <script data-require="select2@*" data-semver="3.5.1" src="//cdn.jsdelivr.net/select2/3.5.1/select2.min.js"></script>

  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <input type="hidden" class="search-result-box" />
</body>
</html>

JavaScript

// Code goes here

data = [{
  "id": "12",
  "text": "Personal Chef",
  "parent": "0",
  "order": 0
}, {
  "id": "11",
  "text": "Entertainment",
  "parent": "0",
  "order": 1,
  "children": [{
    "id": "37",
    "text": "DJ’s",
    "parent": "11",
    "order": 0
  }, {
    "id": "38",
    "text": "Live Band",
    "parent": "11",
    "order": 1
  }, {
    "id": "36",
    "text": "Clowns - Kids parties",
    "parent": "11",
    "order": 2
  }]
}, {
  "id": "10",
  "text": "Motorcycle Repair",
  "parent": "0",
  "order": 2,
  "children": [{
    "id": "137",
    "text": "1DJ’s",
    "parent": "11",
    "order": 0
  }, {
    "id": "138",
    "text": "1Live Band",
    "parent": "11",
    "order": 1
  }, {
    "id": "136",
    "text": "1Clowns - Kids parties",
    "parent": "11",
    "order": 2
  }]
}];

$(function() {
  
   $(".search-result-box").select2({
     placeholder: "eg: 1967 Stingray Mechanic",
     multiple: 'multiple',
     width: 225,
     selectOnBlur: true,
     data: data
   });

 // $(".search-result-box").select2('val', 38); // Tried select2('val', "38") also.
  
});