Создание поисковой панели с помощью JavaScript 🧐

Каждый разработчик должен знать, как создать панель поиска, поскольку она используется практически на каждом сайте.

В этой статье мы создадим панель поиска. Мы научимся использовать метод fetch. Мы будем использовать API https://jsonplaceholder.typicode.com/users.

Как настроить

Создайте 3 файла: index.html, styles.css и script.js.

  1. В файле index.html установите следующие настройки
<!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>
Войти в полноэкранный режим Выйти из полноэкранного режима
  1. В файле styles.css придайте стиль вашему вводу и результатам поиска.
.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;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Вы только что подготовили статические части, теперь перейдем к функциональной части.

Когда пользователь вводит имя пользователя или адрес электронной почты, Javascript возвращает только те данные, которые соответствуют введенным значениям. Если ни одно значение не совпадает, то результатов не будет.

  1. В файле script.js объявим переменные, которые помогут нам запрашивать html.
const userCardTemplate = document.querySelector("[data-user-template]")
const userCardContainer = document.querySelector("[data-user-cards-container]")
const searchInput = document.querySelector("[data-search]")

Войти в полноэкранный режим Выйти из полноэкранного режима

Давайте объявим переменную, которая будет хранить данные о пользователях

const users = []
Вход в полноэкранный режим Выход из полноэкранного режима

Давайте получим данные о наших пользователях из API с помощью метода fetch. На данном этапе нас интересуют только имя пользователя и адрес электронной почты.

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

})
Войти в полноэкранный режим Выход из полноэкранного режима

Мы успешно получили данные из API и отобразили результаты в браузере, которые должны выглядеть следующим образом.

Каждый раз, когда пользователь набирает любую букву, поле, соответствующее введенному символу, будет отображаться, а поля, не содержащие этот символ, будут скрыты.

Вот код.

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)
    })
})
Вход в полноэкранный режим Выход из полноэкранного режима

Вот полный файл script.js

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)
    })
})
Вход в полноэкранный режим Выход из полноэкранного режима

Обзор

Строка поиска — важная функция в любом программном обеспечении. Но ее создание может быть сложной задачей в зависимости от используемых сервисов, например, использование firebase firestore — хороший пример, который может потребовать использования других сервисов, таких как Algolia и облачные функции.

Я работаю над созданием статьи о firestore и поиске Algolia с использованием облачных функций.

Эта статья была первоначально опубликована на melbite.com/building-the-search-bar-with-javascript-🧐

Оцените статью
Procodings.ru
Добавить комментарий