Product Filter And Search

Как сделать — Фильтр элементов

Узнать, как фильтровать элемент DIV на основе его имени класса.

Фильтр элементов DIV

Создание фильтра элементов DIV

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

.filterDiv float: left;
background-color: #2196F3;
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none; /* Скрыто по умолчанию */
>

/* В класс «show» добавляется к отфильтрованные элементы */
.show display: block;
>

/* Стиль кнопок */
.btn border: none;
outline: none;
padding: 12px 16px;
background-color: #f1f1f1;
cursor: pointer;
>

/* Добавить светло-серый фон на наведении курсора мыши */
.btn:hover background-color: #ddd;
>

/* Добавить темный фон для активной кнопки */
.btn.active background-color: #666;
color: white;
>

Шаг 3) Добавить JavaScript:

Пример

filterSelection(«all»)
function filterSelection(c) var x, i;
x = document.getElementsByClassName(«filterDiv»);
if (c == «all») c = «»;
// Добавить класс «show» (display:block) к отфильтрованным элементам и удалите класс «show» из элементов, которые не выбраны
for (i = 0; i < x.length; i++) w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], «show»);
>
>

// Показать отфильтрованные элементы
function w3AddClass(element, name) var i, arr1, arr2;
arr1 = element.className.split(» «);
arr2 = name.split(» «);
for (i = 0; i < arr2.length; i++) if (arr1.indexOf(arr2[i]) == -1) element.className += " " + arr2[i];
>
>
>

// Скрыть элементы, которые не выбраны
function w3RemoveClass(element, name) var i, arr1, arr2;
arr1 = element.className.split(» «);
arr2 = name.split(» «);
for (i = 0; i < arr2.length; i++) while (arr1.indexOf(arr2[i]) > -1) arr1.splice(arr1.indexOf(arr2[i]), 1);
>
>
element.className = arr1.join(» «);
>

// Добавить активный класс к текущей кнопке управления (выделите ее)
var btnContainer = document.getElementById(«myBtnContainer»);
var btns = btnContainer.getElementsByClassName(«btn»);
for (var i = 0; i < btns.length; i++) btns[i].addEventListener("click", function() var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(» active», «»);
this.className += » active»;
>);
>

Источник

Создание компонента фильтра данных на чистом CSS

От автора: в этом руководстве мы узнаем о создании компонента фильтра данных на чистом CSS, для которого не требуется JavaScript. Мы будем использовать простую разметку, некоторые элементы управления формой и некоторые действительно интересные селекторы CSS, которые вы, возможно, раньше не использовали.

Над чем мы работаем

У каждого автора здесь на Tuts + есть собственная страница архива. Мы собираемся воссоздать такой список руководств, используя собственную разметку. Затем мы реализуем компонент, который будет фильтровать записи на основе категорий, к которым они принадлежат. Вот наш окончательный проект:

1. Начинаем с HTML-разметки

Мы начнем с определения категорий фильтров в нашем компоненте. В этом примере мы будем использовать семь фильтров:

Изучите Веб-вёрстку с нуля

Если вы мечтаете создавать сайты, но не знаете, с чего начать. Хотите глубоко погрузиться в основы веб-разработки, а не просто пройтись по верхам — этот курс для вас!

Для этого мы сначала определяем семь переключателей, которые группируем через ключевое словом categories. По умолчанию выбрана первая кнопка-переключатель:

Затем мы создаем упорядоченный список, который содержит метки, связанные с этими переключателями. Помните, что мы связываем переключатель с меткой, устанавливая его значение id равным значению for метки:

Затем мы настраиваем другой упорядоченный список, включающий элементы, которые мы хотим фильтровать (наши карточки). Каждый из отфильтрованных элементов будет иметь собственный атрибут data-category, значение которого представляет собой список фильтров, разделенных пробелами:

В нашем случае фильтруемые элементы будут постами. Таким образом, разметка, которую мы будем использовать для описания поста вместе с его мета-данными (заголовок, изображение, категории), выглядит следующим образом:

Когда разметка готова, давайте обратим внимание на необходимые стили.

2. Определение стилей

Сначала мы визуально скрываем переключатели:

Затем мы добавляем несколько стилей для фильтров:

CSS Grid Layout

Далее мы укажем некоторые стили для фильтруемых элементов. Самое главное, мы используем CSS Grid, чтобы уложить их по-разному в зависимости от размера экрана:

Примечание. Для удобства чтения мы не группируем в CSS общие правила.

Добавление стилей фильтрации

Идея здесь удивительно проста. Каждый раз, когда мы нажимаем на фильтр, должны отображаться только соответствующие отфильтрованные элементы (посты). Для реализации этого функционала мы будем использовать комбинацию следующих вещей:

Обратный псевдо-класс ( :not())

Общий комбинатор элементов одного уровня ( ~) переименованный в CSS4 в «последовательно-одноуровневый селектор»

Когда мы нажимаем на фильтр «All», отображаются все посты, имеющие атрибут data-category:

Когда мы нажимаем на любую другую категорию фильтра, будут видны только целевые посты:

Например, когда мы нажимаем на категорию фильтра «Slider «, будут отображаться только посты, принадлежащие этой категории.

Компонент фильтра на чистом CSS в действии

Стоит отметить, что в приведенных выше стилях вместо синтаксиса [att~=val] мы могли бы в равной степени использовать синтаксис [att*=val]. Вот как будет выглядеть это изменение:

Быстрое пояснение CSS-селектора

Что именно указывает этот селектор? Первая часть [value=»CSS»]:checked ищет выбранные переключатели с определенным значением (в данном случае «CSS»).

После этого тильда (~) — это то, что мы сейчас называем «последовательно-одноуровневым селектором». Он выбирает элементы, у которых тот же родительский элемент, что и у предыдущего элемента, даже если они в разметке расположены не рядом. Так что ~ .posts .post ищет элементы, .posts .post, у которых тот же родительский элемент, что и у выбранного переключателя.

Чтобы еще повысить специфичность, мы уточняем наш селектор :not([data-category~=»CSS»]), чтобы он выбирал только те элементы .post, у которых атрибут data-category не содержит значение «CSS» где-то внутри разделенного пробелами списка.

Затем он применяет display: none; к любым элементам, которые соответствуют этим критериям. Это довольно сложный селектор, хотя он вполне логичен. Человеческим языком вы можете описать это как: «Когда выбран переключатель со значением«CSS», найти все элементы, которые не содержат «CSS» в списке категорий данных, и скрыть их».

Завершающие стили

В качестве последнего шага мы добавим правило, которое выделяет активную категорию фильтра:

Источник

Фильтр контента на чистом HTML + CSS

Фильтр блоков на чистом HTML и CSS. Серьезным решением это назвать сложно, но чтобы посмотреть на возможности HTML и CSS очень даже ничего! В принципе, можно использовать на каком-нибудь простом сайте за 500р, созданном на коленке с телефона пока ехал в электричке.

HTML

FILTER BY COLOR
 
 BLUE RED GREEN RESET 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
10
 
11
 
12
 
13
 
14
 
15
 
16
 

CSS

body < margin:0; text-align:center; font-family: Verdana; background:#f5f5f5; >h1 < text-align:center; >.container < width:90%; margin:0 auto; >input[type="radio"] < display:none; >label < width:23%; float:left; text-align:center; background:#ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); color:#222222; padding:0.5%; margin:0.5%; margin-bottom:30px; cursor:pointer; >input[type="radio"][id="blue"]:checked + label < background:#6666ff; >input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green < width:0; height:0; padding:0; margin:0; opacity:0; >input[type="radio"][id="red"]:checked + label < background:#ff4466; >input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green < width:0; height:0; padding:0; margin:0; opacity:0; >input[type="radio"][id="green"]:checked + label < background:#66dd99; >input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red < width:0; height:0; padding:0; margin:0; opacity:0; >.tile < width:23%; height:100px; float:left; transition:all 1s; margin:0.5%; padding:0.5%; >.green < background:#66dd99; >.blue < background:#6666ff; >.red

Источник

Product Filter and Search Using Javascript

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to build a product filter and search. To create this project, we need HTML, CSS and Javascript. Since this is quite an advanced project, I wouldn’t recommend it for javascript beginners. If you are a javascript intermediate or expert you can surely go on and create this one.

Let us take an overview of what this project actually is. The project consists of a bunch of product cards. Each of these cards has a name, price and category assigned to them. Above these cards, there is a search bar where the user can search a product based on its name.

Below the search bar, there are a group of buttons. Each of these buttons has a category name on it. When the user clicks on any one of these buttons, the products corresponding to that particular category are shown.

Video Tutorial:

If you are interested to learn about this project by watching the video tutorial then do check out the video down below. Also be sure to subscribe to my youtube channel where I regularly post tutorials, tricks and tips.

Project Folder Structure:

Now let us first create the project folder structure so that we can begin the coding. We start by creating a project folder called – ‘Product Filter and Search’. Inside this folder, we create three files. The first is index.html , the second is style.css and the third is script.js . These files are the HTML document, the stylesheet and the script file respectively.

HTML:

We begin with the HTML code. Firstly copy the code below and paste it into your HTML file.

          
 
 Search 
 
All Topwear Bottomwear Jacket Watch 
 
  

CSS:

Next to add styles to this project we use CSS. Now copy the code below and paste it into your CSS file.

* < padding: 0; margin: 0; box-sizing: border-box; border: none; outline: none; font-family: "Poppins", sans-serif; >body < background-color: #f5f8ff; >.wrapper < width: 95%; margin: 0 auto; >#search-container < margin: 1em 0; >#search-container input < background-color: transparent; width: 40%; border-bottom: 2px solid #110f29; padding: 1em 0.3em; >#search-container input:focus < border-bottom-color: #6759ff; >#search-container button < padding: 1em 2em; margin-left: 1em; background-color: #6759ff; color: #ffffff; border-radius: 5px; margin-top: 0.5em; >.button-value < border: 2px solid #6759ff; padding: 1em 2.2em; border-radius: 3em; background-color: transparent; color: #6759ff; cursor: pointer; >.active < background-color: #6759ff; color: #ffffff; >#products < display: grid; grid-template-columns: auto auto auto; grid-column-gap: 1.5em; padding: 2em 0; >.card < background-color: #ffffff; max-width: 18em; margin-top: 1em; padding: 1em; border-radius: 5px; box-shadow: 1em 2em 2.5em rgba(1, 2, 68, 0.08); >.image-container < text-align: center; >img < max-width: 100%; object-fit: contain; height: 15em; >.container < padding-top: 1em; color: #110f29; >.container h5 < font-weight: 500; >.hide < display: none; >@media screen and (max-width: 720px) < img < max-width: 100%; object-fit: contain; height: 10em; >.card < max-width: 10em; margin-top: 1em; >#products < grid-template-columns: auto auto; grid-column-gap: 1em; >>

Javascript:

Finally, we need to add functionality to the filter and also implement the search function. To make it working we add javascript. Do copy the code provided below and paste it into your javascript file.

let products = < data: [ < productName: "Regular White T-Shirt", category: "Topwear", price: "30", image: "white-tshirt.jpg", >, < productName: "Beige Short Skirt", category: "Bottomwear", price: "49", image: "short-skirt.jpg", >, < productName: "Sporty SmartWatch", category: "Watch", price: "99", image: "sporty-smartwatch.jpg", >, < productName: "Basic Knitted Top", category: "Topwear", price: "29", image: "knitted-top.jpg", >, < productName: "Black Leather Jacket", category: "Jacket", price: "129", image: "black-leather-jacket.jpg", >, < productName: "Stylish Pink Trousers", category: "Bottomwear", price: "89", image: "pink-trousers.jpg", >, < productName: "Brown Men's Jacket", category: "Jacket", price: "189", image: "brown-jacket.jpg", >, < productName: "Comfy Gray Pants", category: "Bottomwear", price: "49", image: "comfy-gray-pants.jpg", >, ], >; for (let i of products.data) < //Create Card let card = document.createElement("div"); //Card should have category and should stay hidden initially card.classList.add("card", i.category, "hide"); //image div let imgContainer = document.createElement("div"); imgContainer.classList.add("image-container"); //img tag let image = document.createElement("img"); image.setAttribute("src", i.image); imgContainer.appendChild(image); card.appendChild(imgContainer); //container let container = document.createElement("div"); container.classList.add("container"); //product name let name = document.createElement("h5"); name.classList.add("product-name"); name.innerText = i.productName.toUpperCase(); container.appendChild(name); //price let price = document.createElement("h6"); price.innerText = "$" + i.price; container.appendChild(price); card.appendChild(container); document.getElementById("products").appendChild(card); >//parameter passed from button (Parameter same as category) function filterProduct(value) < //Button class code let buttons = document.querySelectorAll(".button-value"); buttons.forEach((button) => < //check if value equals innerText if (value.toUpperCase() == button.innerText.toUpperCase()) < button.classList.add("active"); >else < button.classList.remove("active"); >>); //select all cards let elements = document.querySelectorAll(".card"); //loop through all cards elements.forEach((element) => < //display all cards on 'all' button click if (value == "all") < element.classList.remove("hide"); >else < //Check if element contains category class if (element.classList.contains(value)) < //display element based on category element.classList.remove("hide"); >else < //hide other elements element.classList.add("hide"); >> >); > //Search button click document.getElementById("search").addEventListener("click", () => < //initializations let searchInput = document.getElementById("search-input").value; let elements = document.querySelectorAll(".product-name"); let cards = document.querySelectorAll(".card"); //loop through all elements elements.forEach((element, index) => < //check if text includes the search value if (element.innerText.includes(searchInput.toUpperCase())) < //display matching card cards[index].classList.remove("hide"); >else < //hide others cards[index].classList.add("hide"); >>); >); //Initially display all products window.onload = () => < filterProduct("all"); >;

Your product filter and search is now ready. I hope you liked the tutorial. If you have any issue regarding this code you can either download the source code or comment your doubts below. You can download the code by simply clicking on the download button below. If you have ideas, queries or suggestions do leave them in the comments below.
Happy Coding!

Источник