DEV Community

Cover image for Building search-bar with JavaScript 🧐
Melbite blogging Platform
Melbite blogging Platform

Posted on

Building search-bar with JavaScript 🧐

Every developer needs to know how to create a search bar because is used in almost every single site.

In this article, we are going to create search bar. We shall learn how to use the fetch method. We shall make use of https://jsonplaceholder.typicode.com/users API.

How to setup

Create 3 files that are index.html, styles.css and script.js

  1. In the index.html file set up like this
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
    <title>Javascript search bar</title>
</head>
<body>
    <div class="search-wrapper">
        <label for="search" >Search User</label>
        <input type="search"  id="search" data-search="">
    </div>
    <div class="user-cards"  data-user-cards-container > 
        <template data-user-template>
            <div class="card">
                <div class="header" data-header></div>
                <div class="body" data-body></div>
            </div>
        </template>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
  1. In the styles.css style your input and the search results.
.search-wrapper{
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
input{
    font-size: 1rem;
    padding: .5rem;
}
.user-cards{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .25rem;
    margin-top: 1rem;
}
.card{
    border: 1px solid black; 
    background-color: white;
    padding: .5rem;
}
.card .header{
    margin-bottom: .25rem;
}
.card > .body{
    font-size: .8rem;
    color: #777;
}
.hide {
    display: none;
}
Enter fullscreen mode Exit fullscreen mode

You've just prepared the static parts, lets get into the functionality part.

Whenever one types a username or email address, Javascript will only return the user and details that matches the input values. If no value matches then will return no results.

  1. In the script.js file Let's declare variables that will help us query the html.
const userCardTemplate = document.querySelector("[data-user-template]")
const userCardContainer = document.querySelector("[data-user-cards-container]")
const searchInput = document.querySelector("[data-search]")

Enter fullscreen mode Exit fullscreen mode

Let's declare a variable that hold the users

const users = []
Enter fullscreen mode Exit fullscreen mode

Let's fetch our users details from the API using our fetch method. In this point we are only concerned with the username and email address.

fetch("https://jsonplaceholder.typicode.com/users").then((res) => res.json()).then(data => {
    users = data.map(user=> {
        const card = userCardTemplate.content.cloneNode(true).children[0]
        const header = card.querySelector("[data-header]")
        const body = card.querySelector("[data-body]")

        // adding content into the query selected i.e header and body
        header.textContent = user.name
        body.textContent = user.email
        userCardContainer.append(card)

        // return the result after successfull fetch
        return {name: user.name, email: user.email, element: card}
    });

})
Enter fullscreen mode Exit fullscreen mode

We have successfully fetched our data from the API and rendered the results to the browser that should look like this.

Fetch Results

Whenever a user types any letter, the field that matches the input will be displayed and the fields that does not contain such character is hidden.

Here is the code.

searchInput.addEventListener('input', (e) => {
    const value = e.target.value
    users.forEach((user) => {
        const isVisible = user.name.toLowerCase().includes(value) || user.email.toLowerCase().includes(value)
        user.element.classList.toggle('hide', !isVisible)
    })
})
Enter fullscreen mode Exit fullscreen mode

Here is the complete script.js file

const userCardTemplate = document.querySelector("[data-user-template]")
const userCardContainer = document.querySelector("[data-user-cards-container]")
const searchInput = document.querySelector("[data-search]")

let users = []

fetch("https://jsonplaceholder.typicode.com/users").then((res) => res.json()).then(data => {
    users = data.map(user=> {
        const card = userCardTemplate.content.cloneNode(true).children[0]
        const header = card.querySelector("[data-header]")
        const body = card.querySelector("[data-body]")

        // adding content into the query selected i.e header and body
        header.textContent = user.name
        body.textContent = user.email
        userCardContainer.append(card)

        // return the result after successfull fetch
        return {name: user.name, email: user.email, element: card}
    });

})

searchInput.addEventListener('input', (e) => {
    const value = e.target.value
    users.forEach((user) => {
        const isVisible = user.name.toLowerCase().includes(value) || user.email.toLowerCase().includes(value)
        user.element.classList.toggle('hide', !isVisible)
    })
})
Enter fullscreen mode Exit fullscreen mode

Recap

The search bar is an important feature in any software. But building it might be a challenge depending on the services you are using, eg using firebase firestore is a good example that may require you to use other services like Algolia and cloud functions

Am working on creating an article about firestore and Algolia search using cloud functions.

This article was originally published at melbite.com/building-the-search-bar-with-javascript-🧐

Discussion (0)