Building Live Search Functionality with JavaScript
Published: 2023-08-06 08:31:35

## Introduction

> The live search function is an important tool in modern websites that filters results based on a user's preference. This improves customers' experience and saves users the stress of navigating through hundreds of results to find a specific item.

A live search bar is an important tool for enhancing user experience, boosting engagement, and giving website administrators useful insights. It can increase traffic, boost conversion rates, and ultimately result in more success for a website or application by making it simpler for people to locate what they're looking for.

## Project Overview
In this article, you will build a search bar that gives you the result for movies when you search for a particular movie. You will build this project with the use of HTML, CSS, and JavaScript.

## Prerequisites
The prerequisites for following along with this project include the following:
- Knowledge of [HTML](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics), [CSS](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics), and [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript). This article is neither an introduction to HTML, CSS, or JavaScript.
- Knowledge of [Application Programming Interface](https://en.wikipedia.org/wiki/API) (API)
- An account with [The Movie Database (TMDB)](https://developer.themoviedb.org/reference/intro/getting-started).

## HTML - Create the UI

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <title>Searchbar</title>
</head>
<body>
  <form action="/" class="search-btn">
    <i class="fa fa-search searchIcon" aria-hidden="true"></i>
    <input type="text" placeholder="search for a movie...">
  </form>

  <div class="search-results"></div>
</body>
</html>
```

- The above line of code above contains an HTML boilerplate with HTML code that creates a search form with a text input field for entering movie titles, and a container for displaying the search results.


```
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
```

- The `link` tag in the head content is a font icon link that will display a search bar icon.

```
<form action="/" class="search-btn">
    <i class="searchIcon" aria-hidden="true"></i>
    <input type="text" placeholder="search for a movie...">
</form>
```

- The `<form>` element is used to create a container for the `input` field with an action of `/`, which means it will submit to the current page.

- The `<i class="searchIcon" aria-hidden="true"></i>` is a search bar icon tag from font-awesome which will display movie results when clicked.
- The `input` field is where users will enter search queries. The `placeholder` attribute indicates the kind of input expected in the field.

```
<div class="search-results"></div>
```

- The `div` with a class of `search-result` is a container that will display the results.

## CSS - Style the UI

```
.form{
  width: 70%;
  margin: 25px auto;
}

input{
  width: 80%;
  height: 28px;
  font-size: 1.1rem;
  padding-left: 40px;
}

.searchIcon{
  position: relative;
  left: 30px;
}
```

- The `.form` class set the width container to `70%` of its parent element and the `margin` element is set to `25px` for the top and bottom. And auto margin on the left and right which centers the form element horizontally.
- The `input` field has a width of `80%` of its parent element, a height of `28px`, and a font size of `1.1rem` which is relative to the root font size.

## JavaScript

```
const form = document.querySelector('.form');
const input = form.querySelector('input');
const searchResults = document.querySelector('.search-results');
const searchIcon = document.querySelector('.searchIcon')
```

- Each of the elements is given a variable using the `const` type. These variables are used to reference elements in the HTML document using the `document.querySelector()`.

```
const searchMovies = async (query) => {
  const apiKey = 'apiKey'; // replace this part with your actual API key
  const apiUrl = `https://api.themoviedb.org/3/search/movie?api_key=${apiKey}&query=${query}`;
}
```

- A function called `searchMovies` is defined using the async keyword to indicate that takes a query parameter and uses it to construct an API URL that queries T[he movie database (TMDB) API ](https://developer.themoviedb.org/reference/intro/getting-started)for movie results.

```
try {
    const response = await fetch(apiUrl);
    const data = await response.json();
    const movies = data.results;
```

- The function `try` block executes an asynchronous fetch request to retrieve data from the API URL. The response is then parsed into JSON format using the `json()` method, and saved into a data variable.

```
searchResults.innerHTML = '';
```

- The `innerHTML` of the movie result is set to an empty variable. This means that whenever you make a new search, the page will research to show the new research result.

```
movies.forEach((movie) => {
      const { poster_path, title, release_date, vote_average } = movie;

      const movieContainer = document.createElement('div');
      movieContainer.classList.add('movie');

      const posterUrl = poster_path
        ? `https://image.tmdb.org/t/p/w500/${poster_path}`
        : 'https://via.placeholder.com/500x750?text=No+poster';

      movieContainer.innerHTML = `
        <img src="${posterUrl}" alt="${title}" />
        <div class="movie-info">
            <h3>${title}</h3>
            <small>Released on ${release_date}</small>
            <span class="rating">${vote_average}</span>
        </div>
      `;

      searchResults.appendChild(movieContainer);
    });
}
```

- The function uses `forEach` loop to iterate through each movie object in the array, and extracts several properties from each movie, including the poster image URL, title, release date, and vote average.
- It also creates a new `div` element to represent each movie and sets the `innerHTML` of the element to a string of HTML code that includes an `img` for the movie poster, `span` for the rating, `h3` for the movie title, and release date.
- The function then appends the new movie div element to the `searchResults` container.


```
catch (error) {
    console.error(error);
  }
}
```

- The above code will log any errors that may occur during the API request or movie data processing.

```
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const query = input.value;
  searchMovies(query);
});
```

- The `EventListener` listens for a click event when the form is submitted and displays the result.

```
searchIcon.addEventListener('click', async () => {
  const query = input.value;
  searchMovies(query);
});
```

- An `EventListener` is added to the search bar icon so that when the icon is clicked, the event listener calls the `searchMovies` function, passing in the current value of the input field as the query parameter.

## Conclusion
A functional search is implemented in almost modern websites to ease the stress of users who visit the website. Knowing how to implement one will improve one's skill as a developer.

I hope you found this article useful, please like, follow, and share with your friends. I post content on web development.