JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.min.css">
<input type="text" class="input">
<input type="text" class="input-search">

<p class="search-results"></p>

JavaScript

//TODO: Render filtered tag to results
$('.input').on('change', function(e) {
  const searchInputValue = $(this).val()
  console.log(searchInputValue)
    //Get all course data (course name and allTagIds)
  $.ajax('https://safetyskills-bifrost-staging.azurewebsites.net/api/courses', {
    cache: false,
    type: 'GET'
  }).done(function(courses) {
    return courses.filter(function(item) {
      return console.log(item.allTagIds.indexOf(searchInputValue) === -1)
    });
  }).fail(function(error) {
    alert('Failed to get available Course Tags: ' + JSON.stringify(error));
  });
});

function filteredItems() {
  return courses.filter(function(item) {
    return item.tags.filter(function(tagId) {
      return searchInputValue.indexOf(tagId) >= 0;
    }).length > 0;
  });
}

//Gets all course tags and add them to the select box
$.ajax('https://scorm.safetyskills.com/api/tags', {
  cache: false,
  type: 'GET'
}).done(function(tags) {
  $('.input').selectize({
    plugins: ['remove_button'],
    persist: false,
    //Populates course tags into input
    options: tags.map(function(tag) {
      return {
        text: tag.name,
        value: tag.id
      }
    }),
    onItemAdd: function(value) {
      $('.option').val(value)
    }
  });
}).fail(function(error) {
  alert('Failed to get available Course Tags: ' + JSON.stringify(error));
});

//Get all course names
$.ajax('https://safetyskills-bifrost-staging.azurewebsites.net/api/courses', {
  cache: false
}).fail(function() {
  alert('Unable to find login page. Please select an account and try again.');
}).done(function(courses) {
  courses.forEach(function(course) {
    return $('.search-results').append('<p>' + course.name + '</p>').hide()
  });
});

//Search through course names
$('.input-search').keyup(function() {
  $('.search-results').show()
  var inputSearchValue = $(this).val().toLowerCase();
  $('.search-results').find('p').each(function() {
    var inputSearchText = $(this).text().toLowerCase();
   ...