Создание веб-страниц с динамической фильтрацией и сортировкой данных — важная задача для многих проектов. Это может быть интернет-магазин, портфолио, каталог товаров или любой другой веб-проект, где пользователь ожидает возможности быстро находить необходимую информацию. В этой статье мы рассмотрим, как создать эффективный фильтр веб-страниц на JavaScript, используя HTML, CSS и JavaScript.

Основы фильтрации и сортировки

1. HTML и CSS: создание основы

Прежде чем приступить к JavaScript, нужно создать основу для веб-страницы. Это включает в себя HTML-разметку и CSS-стилизацию элементов. Создадим простую модель списка товаров:

«`html

<!DOCTYPE html>

<html>

<head>

<link rel=»stylesheet» type=»text/css» href=»styles.css»>

</head>

<body>

<div class=»filter»>

<label for=»category»>Категория:</label>

<select id=»category»>

<option value=»all»>Все</option>

<option value=»electronics»>Электроника</option>

<option value=»clothing»>Одежда</option>

<!— Другие категории —>

</select>

</div>

<ul id=»product-list»>

<li class=»product» data-category=»electronics»>Смартфон</li>

<li class=»product» data-category=»clothing»>Футболка</li>

<!— Другие товары —>

</ul>

<script src=»script.js»></script>

</body>

</html>

«`

2. JavaScript: фильтрация и сортировка

Теперь перейдем к JavaScript, который позволит нам реализовать фильтрацию и сортировку. Создайте файл `script.js` и начнем с объявления переменных и получения элементов из HTML:

«`javascript

document.addEventListener(«DOMContentLoaded», function() {

const categoryFilter = document.getElementById(«category»);

const productList = document.getElementById(«product-list»);

const products = productList.getElementsByClassName(«product»);

categoryFilter.addEventListener(«change», function() {

const selectedCategory = categoryFilter.value;

for (const product of products) {

const productCategory = product.getAttribute(«data-category»);

if (selectedCategory === «all» || selectedCategory === productCategory) {

product.style.display = «block»;

} else {

product.style.display = «none»;

}

}

});

});

«`

3. Оптимизация и улучшение

  • Поиск и фильтрация: добавьте поле для поиска, которое будет фильтровать товары по ключевым словам.
  • Анимация: добавьте анимацию при смене категории или при применении фильтра.
  • Сортировка: реализуйте возможность сортировки товаров по различным параметрам.
  • Библиотеки: используйте библиотеки, такие как jQuery или React, для более сложных проектов.
ОНЛАЙН-ПРАКТИКУМ
КАК «ХАКНУТЬ» PYTHON С ПОМОЩЬЮ CHATGPT
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • Прямо в эфире решим типичные задачи программиста только с помощью ChatGPT
  • Возможности Python — расскажем что можно делать и сколько на этом зарабатывать?
  • Что ждет рынок программирования и почему мы решили сюда пойти
Участвовать бесплатно

Пример усовершенствованного фильтра

Давайте доработаем наш фильтр с учетом оптимизации и дополнительных возможностей:

«`javascript

document.addEventListener(«DOMContentLoaded», function() {

const categoryFilter = document.getElementById(«category»);

const searchInput = document.getElementById(«search»);

const productList = document.getElementById(«product-list»);

const products = productList.getElementsByClassName(«product»);

categoryFilter.addEventListener(«change», updateDisplay);

searchInput.addEventListener(«input», updateDisplay);

function updateDisplay() {

const selectedCategory = categoryFilter.value.toLowerCase();

const searchQuery = searchInput.value.toLowerCase();

for (const product of products) {

const productCategory = product.getAttribute(«data-category»).toLowerCase();

const productName = product.textContent.toLowerCase();

const categoryMatch = selectedCategory === «all» || productCategory.includes(selectedCategory);

const searchMatch = productName.includes(searchQuery);

if (categoryMatch && searchMatch) {

product.style.display = «block»;

} else {

product.style.display = «none»;

}

}

}

});

«`

Заключение

Создание фильтра веб-страниц на JavaScript – это мощное средство для улучшения пользовательского опыта на вашем сайте. Он позволяет пользователям быстро находить нужную информацию и делает взаимодействие с вашим проектом более удобным. Помните о возможностях оптимизации, добавления анимации и сортировки для создания полноценного инструмента.

3-дневный курс
НАУЧИСЬ СОЗДАВАТЬ TELEGRAM-БОТОВ НА PYTHON С CHATGPT
C НУЛЯ ЗА 3 ДНЯ
  • Освой Python и нейросети и узнай, как гарантированно получить первые 10 заказов
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Создай и прокачай собственного чат-бота
Участвовать бесплатно
Вебинар
ФРИЛАНС И ПРОЕКТНАЯ РАБОТАДЛЯ PYTHON-РАЗРАБОТЧИКА
  • Подарим подборку бесплатных инструментов для написания кода
Участвовать бесплатно