4.2 - Quicksearch

Introduction

As music supervisors usually already have something in mind when they are looking for a track a quick search option was mandatory in the app:

This results in a list of tracks based on the name of the track or artist:

And shows you a list of recommended songs based on the mood of the first track from the search results list

How it works

When users start typing the in the searchbar this is registered by an eventListener:

  input.addEventListener(
    'input',
    debounce((event) => {
      // saves the value of what the user is typing in userInput
      const userInput = event.target.value;
      // intercepts the url the form is pointing at
      const url = document.getElementById(formID).getAttribute('action');
      // shapes the url with the query state
      history.replaceState({}, '', `?searchValue=${userInput}&token=${token}`);
      // then a fetch to our own server is made with the id and token passed, these are used on the server to fetch the right playlist the Spotify api
      fetch(`${url}?query=${userInput}&async=true&token=${token}`)
        .then((res) => res.text())
        .then((html) => {
          // the server than renders the component, with the right data and sends this back to the client
          const resultComponent = document.querySelector('.search-results');
          resultComponent.innerHTML = html;
          });
        });
    })