Создание веб-страниц с динамической фильтрацией и сортировкой данных — важная задача для многих проектов. Это может быть интернет-магазин, портфолио, каталог товаров или любой другой веб-проект, где пользователь ожидает возможности быстро находить необходимую информацию. В этой статье мы рассмотрим, как создать эффективный фильтр веб-страниц на 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, для более сложных проектов.
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
  • Где и как применять? Потестируем модель после установки на разных задачах
  • Как дообучить модель под себя?
Участвовать бесплатно

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

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

«`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 – это мощное средство для улучшения пользовательского опыта на вашем сайте. Он позволяет пользователям быстро находить нужную информацию и делает взаимодействие с вашим проектом более удобным. Помните о возможностях оптимизации, добавления анимации и сортировки для создания полноценного инструмента.

Большой практикум
ЗАМЕНИ ВСЕ НЕЙРОСЕТИ НА ОДНУ — PERPLEXITY
ПОКАЖЕМ НА КОНКРЕТНЫХ КЕЙСАХ
  • Освой Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Расскажем, как получить подписку (240$) бесплатно
Участвовать бесплатно
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
Участвовать бесплатно