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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://meijer-nick1.gitbook.io/meesterproef/4-code/4.2-quicksearch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.