Для реализации фильтра с поиском размеров +-15% по значению типа 1,2*3,5 в HTML, вам потребуется комбинация HTML, CSS и JavaScript.
1. Верстка HTML:
Создайте разметку, используя HTML-элементы, такие как <input>
, <button>
и <div>
, чтобы создать форму с полем поиска и кнопкой. Например:
<input type="text" id="search" placeholder="Введите значение" /> <button onclick="filter()">Фильтр</button> <div id="result"></div>
2. Стилизация с использованием CSS:
Добавьте стили для элементов формы, чтобы сделать их более привлекательными и удобными для взаимодействия. Пример CSS:
input { padding: 10px; width: 200px; } button { padding: 10px 20px; } #result { margin-top: 20px; padding: 10px; border: 1px solid #ccc; background: #f9f9f9; }
3. JavaScript-функция:
Напишите JavaScript-функцию, которая будет выполнять фильтрацию и поиск значений.
function filter() { // Получаем значение из поля ввода var searchValue = document.getElementById("search").value; // Преобразуем строку в числа, разделяя их с помощью символа * var values = searchValue.split("*").map(Number); // Вычисляем минимальное и максимальное значение размеров, учитывая диапазон +-15% var minValue = values[0] * (1 - 0.15); var maxValue = values[1] * (1 + 0.15); // Получаем результаты фильтрации var results = filterBySize(minValue, maxValue); // Выводим результаты на страницу displayResults(results); } function filterBySize(minValue, maxValue) { // Здесь должна быть реализация фильтрации по значениям размеров в вашем проекте // В зависимости от ваших требований и структуры данных, вы можете использовать базу данных, // массив объектов или любые другие методы для фильтрации данных // Возвращаем результаты фильтрации (пример для демонстрации) return [ { name: "Продукт 1", size: 2.5 }, { name: "Продукт 2", size: 3.7 }, { name: "Продукт 3", size: 1.8 }, { name: "Продукт 4", size: 4.2 } ]; } function displayResults(results) { // Получаем элемент, где будут показаны результаты var resultContainer = document.getElementById("result"); // Очищаем содержимое элемента resultContainer.innerHTML = ""; // Создаем элементы DOM для каждого результата и добавляем их в контейнер results.forEach(function(result) { var item = document.createElement("div"); item.textContent = result.name + " (размер: " + result.size + ")"; resultContainer.appendChild(item); }); }
Эта функция разделяет введенное значение по символу "*", преобразует его в числа и вычисляет минимальное и максимальное значение размеров с учетом диапазона +-15%. Затем функция вызывает filterBySize
, которая в свою очередь возвращает результаты фильтрации. Окончательно, функция displayResults
отображает результаты на странице.
4. Подключение JavaScript:
Вставьте следующий код в HTML-файл перед закрывающим тегом </body>
для подключения JavaScript-кода:
<script> function filter() { // Код JavaScript } </script>
Теперь, при вводе значения и нажатии кнопки "Фильтр", выполнится JavaScript-функция, которая отфильтрует товары по указанным размерам с учетом диапазона +-15% и покажет результаты на странице.