<form>
  <p>
    <label for="search">Search</label>
    <input type="search" id="search">
  </p>
  <p>
    <label for="category">Category</label>
    <select id="category">
      <option></option>
      <option>Food</option>
      <option>Games</option>
    </select>
  </p>
  
  <button id="searchBtn">Search</button>
</form>

<div id="status"></div>
<div id="results"></div>

const productAPI = 'https://wt-c2bde7d7dfc8623f121b0eb5a7102930-0.sandbox.auth0-extend.com/productSearch';

$(document).ready(() => {
  let $search = $('#search');
  let $category = $('#category');
  let $searchBtn = $('#searchBtn');
  let $status = $('#status');
  let $results = $('#results');
  
  $searchBtn.on('click', e => {
    e.preventDefault();
    
    // first clear previous stuff
    $status.html('');
    $results.html('');

    // Ok, first validate form
    let term = $search.val();
    let category = $category.val();
    if(term === '' && category === '') {
      $status.html('<b>You must enter a term or select a category.</b>');
      return false;
    }

    $searchBtn.attr('disabled','disabled');
    $status.html('<i>Searching - please stand by...</i>');
    
    $.post(productAPI, { name:term, category:category}, body => {
      $searchBtn.removeAttr('disabled');
      $status.html('');

      if(body.results.length === 0) {
        $results.html('<p>Sorry, no results!</p>');
        return;
      }
      
      let result = '<ul>';
      body.results.forEach(r => {
        result += `<li>${r.name}</li>`
      });
      result += '</ul>';
      $results.html(result);
    });
    
  });
});