> For the complete documentation index, see [llms.txt](https://meijer-nick1.gitbook.io/meesterproef/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://meijer-nick1.gitbook.io/meesterproef/4-code/4.2-quicksearch.md).

# 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: ![1daa93d4b36b590cf6f01b89ec047c4c](https://user-images.githubusercontent.com/47485018/84902057-98a47680-b0ac-11ea-940e-cd2bc88fa7b4.gif)

This results in a list of tracks based on the name of the track or artist: ![Schermafbeelding 2020-06-17 om 15 09 02](https://user-images.githubusercontent.com/47485018/84902125-b1149100-b0ac-11ea-96f1-c79746f40b40.png)

And shows you a list of recommended songs based on the mood of the first track from the search results list ![Schermafbeelding 2020-06-17 om 15 09 15](https://user-images.githubusercontent.com/47485018/84902180-beca1680-b0ac-11ea-90d3-95fc07f34497.png)

## How it works

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

```javascript
  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;
          });
        });
    })
```