Живой поиск — это функционал, который позволяет пользователям получать результаты поиска в реальном времени, по мере ввода текста в поле поиска. Это улучшает пользовательский опыт и может помочь увеличить время пребывания на вашем сайте. В этой статье мы рассмотрим, как добавить на сайт функционал живого поиска с использованием JavaScript и AJAX.
Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.
Шаг 1: Создание HTML-структуры
Для начала нам нужно создать HTML-структуру страницы. Вам потребуется поле для ввода текста и контейнер для отображения результатов поиска:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Живой поиск</title>
</head>
<body>
<input type="text" id="searchInput" placeholder="Введите текст для поиска...">
<div id="searchResults"></div>
</body>
</html>
Шаг 2: Написание JavaScript-кода
Теперь нам нужно написать JavaScript-код, который будет выполнять поиск и отображать результаты. Мы будем использовать fetch для отправки AJAX-запроса на сервер и получения результатов поиска:
const searchInput = document.getElementById('searchInput');
const searchResults = document.getElementById('searchResults');
searchInput.addEventListener('input', (e) => {
const searchText = e.target.value;
if (searchText.trim() === '') {
searchResults.innerHTML = '';
return;
}
fetch(`/search?q=${searchText}`)
.then((response) => response.json())
.then((results) => {
searchResults.innerHTML = results.map((result) => `
<div>
<h3>${result.title}</h3>
<p>${result.description}</p>
</div>
`).join('');
});
});
📘 В этом примере мы используем fetch для отправки запроса на сервер. Вам нужно будет настроить сервер таким образом, чтобы он обрабатывал эти запросы и возвращал результаты в формате JSON.
На курсе Skypro «Веб-разработчик» освоите JavaScript, GitHub, Tilda, Postman, HTML, CSS и другие программы и инструменты, научитесь решать реальные задачи разработчика и работать в команде. Все учебные проекты можно положить в портфолио и устроиться на работу по новой специальности еще в процессе обучения.
Шаг 3: Стилизация результатов поиска
Последний шаг — добавить немного стилей для улучшения внешнего вида результатов поиска. Для этого добавьте следующий CSS-код в раздел <head> вашего HTML-файла:
<style>
#searchInput {
width: 100%;
padding: 8px;
font-size: 16px;
}
#searchResults {
margin-top: 16px;
}
#searchResults div {
padding: 8px;
border-bottom: 1px solid #ccc;
}
#searchResults h3 {
margin: 0;
font-size: 18px;
}
</style>
Теперь у вас есть функциональный живой поиск на вашем сайте! 🎉 Это основы того, как реализовать живой поиск, однако вы можете улучшить его, добавив дополнительные функции, такие как подсветка совпадений, пагинацию и т. д.
Не забывайте тестировать и адаптировать код под ваш проект и серверную часть. Удачной разработки!
Добавить комментарий