JSFiddle - React, Tailwind, and code Playground

by Serg Sagan

HTML

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-3" tabindex="0">
<li class="ui-menu-item autocomplete-subject" id="ui-id-1630" tabindex="-1">Apologia</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1631" tabindex="-1">Apologia</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1632" tabindex="-1">Exploring Creation with Biology</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1633" tabindex="-1">Exploring Creation with Physical Science</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1634" tabindex="-1">General Science</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1635" tabindex="-1">Beautiful Feet</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1636" tabindex="-1">Beautiful Feet</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1637" tabindex="-1">Canon Press</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1638" tabindex="-1">Canon Press</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1639" tabindex="-1">Introductory Logic - The Fundamentals of Thinking Well</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1640" tabindex="-1">Classical Academic Press</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1641" tabindex="-1">Classical Academic Press</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1642" tabindex="-1">The Art of Argument</li>
<li class="ui-menu-item autocomplete-subject" id="ui-id-1643" tabindex="-1">Classical Conversations</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1644" tabindex="-1">Classical Conversations</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1645" tabindex="-1">Challenge 1</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1646" tabindex="-1">Challenge 2</li>
<li class="ui-menu-item autocomplete-subcategory" id="ui-id-1647" tabindex="-1">Challenge 3</li>
<li...

CSS

.autocomplete-subject {
  font-weight: bold;
}

JavaScript

function course_curriculum_source() {
          var current_curriculum = $('.course-curriculum').data('taggle').getTags().values;
          <% if cache_course_curriculum_tags && cache_curriculum_subcategories_hash %>
            var curriculum_tree = <%= cache_course_curriculum_tags.map { |s| [{label: s, value: 'subject'}, {label: s, value: s}, (cache_curriculum_subcategories_hash[s] || []).map {|ss| {label: ss, value: ss} } ] }.flatten.to_json.html_safe %>;
              curriculum_tree = _.filter(curriculum_tree, function (val) {
                  return val.value == 'subject' || current_curriculum.indexOf(val.label) == -1
              });
            $($('.course-curriculum').data('taggle').getInput()).autocomplete('option', 'source', curriculum_tree)
          <% end %>
        }
course_curriculum_source();