Lightdev
Building Live Search Functionality with JavaScript

Building Live Search Functionality with JavaScript

Light Okorie's photo
Light Okorie
·

5 min read

Table of contents

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:

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 the themoviedb.org API for movie results.
try {
    const response = await fetch(apiUrl);
    const data = await response.json();
    const movies = data.results;
  • The try block of the function 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 a new search is made, 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 contents on web development.

Web DevelopmentJavaScriptsoftware developmentReactGeneral Programming