Как сделать фильтр с поиском размеров +-15% по значению типа 1,2*3,5 -?
Есть список, в котором значения ширина/длина указаны как 1,2*3,5. Нужно, чтобы фильтр сделал поиск каждого размера +-15% и выдал все результаты поиска (при вводе 1,2*3,5 в строку поиска).
Дополнительно:
Порядок решения такой:
- Разбиваете введённую строку на два числа.
- Для каждого числа определяете диапазон, умножив его на 0,85 и 1,15.
- У каждого элемента списка разбиваете его строку с размерами на два числа функцией из п.1 и проверяете, входят ли они в нужный диапазон.
Хоть какую-то сложность тут может представлять только нормализация строки, если она требуется. Т.е. если требуется обрабатывать строку, например, и в формате "1.2x3.5", помимо приведённого в вопросе, то придётся немного заморочиться с определением где там числа. Но, на самом деле и тут всё довольно просто: заменяем запятые на точку, а всё, что не цифра и не точка заменяем на пробел. А дальше уже регуляркой легко получить из получившейся строки два числа.
- Правильно понимаю, что без "разбивки на два значения" проблема не решается?
- Может, и решается, но такое решение будет в разы сложнее.
UPD: Хотя нет, не думаю, что можно обойтись без разбивки. Так или иначе введённую строку вам нужно разделить на числа, чтобы определить границы этих +-15%. Дальше уже можно будет заморочиться и не делить значения поля в элементах списка, но это будет извращение при наличии уже готовой функции парсинга строки.
- Vlad Bad, а что вообще значит +-15% ? границы больше меньше 15 при умножении чисел или что ? тогда какой делать фильтр больше 15 или меньше 15 ?
- Алексей Уколов, заменить запятую на точку - это легко решаемо. А вот вид 1.2*3.5 (или 0.98*2.15 и т.д.) - очень желательно оставить в неизменном виде, поскольку уже есть огромный список (в проекте) и что-либо изменять крайне затратно по времени. Подскажите, куда можно обратиться для решения этого вопроса? (я не программист, от слова "совсем")
- szQocks, например, клиенту нужен размер ковра 1.2*3.5м , и нужно, чтобы при введенном (клиентом) значении 1,2*3,5 в поиске отобразились все результаты, находящиеся в списке, с размерами от 1,02*2,97 до 1,32*4,02 (м). Это нужно для того, чтобы отобразить в результатах поиска все "близкие по размеру" ковры, потому как нужный размер (1,2*3,5):
1- может отсутствовать на данный момент времени
2 - у клиента появляется возможность выбрать близкий по размеру, но более подходящий по расцветке ковер - Vlad Bad, ну тогда Алексей правильно ответил
Разбиваете введённую строку на два числа.
Для каждого числа определяете диапазон, умножив его на 0,85 и 1,15.после этого остаётся лишь от данных которые получились - искать нужные размеры в списке
P.S и разбить строку на числа - не значит что изменить список полностью, ну то есть если не мутировать сам список или не изменять - то он останется таким который был
- Vlad Bad,
1- может отсутствовать на данный момент времени
2 - у клиента появляется возможность выбрать близкий по размеру, но более подходящий по расцветке коверну эти мелочи, это уже дополнительная логика, никто тут целый багаж писать кода не будет для ваших хотелок, тут лишь подсказать могут, пример написать минимальный ну и всё
если нужен исполнитель, вам на фриланс надо идти
- szQocks, и ещё один вопрос дилетанта: нельзя-ли сделать скрипт, чтобы (1,2) - число "до звездочки", поискать по признаку +-15%, и (3,5) - число "после звездочки", поискать по признаку +-15% - ?
- Vlad Bad, можно - то что вы спросили - это та же самая задача , которую вы спрашивали изначально
- szQocks, да я пойду, куда скажете (только, лишь-бы , в правильном направлении послали:))) главное понять "это можно-не можно" - чтобы в неизменном виде размер 1,2*3,5 "искался с допусками по размерам". Про разбивку на два числа - я уже понял, но этот вариант не совсем устраивает.
- Vlad Bad,
чтобы в неизменном виде размер 1,2*3,5 "искался с допусками по размерам". Про разбивку на два числа - я уже понял, но этот вариант не совсем устраивает.
- разбить на числа - это временная операция, это вообще не как не отразиться на вашей строке которая изначально там '1,2*3,5', если напрямую её не изменять ( и вряд ли это кто-то будет делать )
так же фильтровать список - если его не изменять напрямую - то он так же останется каким и был, из строк
но отфильтрованный новый список - вы получите, кароче если вы не разраб - думаю нет смысла объяснять как эта шляпа работает
- Тема для нас "горячая", потому как список уже огромен и клиентам нужно как-то в нём искать "нужный товар".
Фильтр нам сделали но, пока "без обсуждаемой здесь функциональности".
Если кому-то интрересно, то фильтр здесь (спрятан под тремя полосками):
https://mirpalasov.ru/wp-content/uploads/2018/04/i...
Благодарю за участие в обсуждении. - Vlad Bad, это типа панорамная идея ? выглядит круто, правда подлагивает чутка ну и дизайн местами мёртвый), например сам поиск)
- Заказать доработку можно здесь: https://freelance.habr.com
- Впрочем, у вас там действительно всё тривиально:
Я доработал ту функцию (очень-очень-очень далёкую от современного красивого кода, к слову), которая у вас используется.
Кодfunction myFunction() { function parseSize(value) { var result = value.replaceAll(',', '.').replaceAll(/[^d.]/g, ' ').match(/ *(d+(?:.d+)?) +(d+(?:.d+)?) */) if (result && result.length >= 3) { return { w: +result[1], h: +result[2], }; } return null; } var PERCENT = 15; var input, filter, ul, li, a, i, txtValue, empty, noResult, lis; inputLength = document.getElementById("myInputLength"); filterSize = parseSize(inputLength.value); if (filterSize) { filterSize.w = { min: filterSize.w * (1 - (PERCENT / 100)), max: filterSize.w * (1 + (PERCENT / 100)), }; filterSize.h = { min: filterSize.h * (1 - (PERCENT / 100)), max: filterSize.h * (1 + (PERCENT / 100)), }; } inputWidth = document.getElementById("myInputWidth"); filterWidth = inputWidth.value.toUpperCase(); inputColor = document.getElementById("myInputColor").value.toUpperCase(); inputHeight = document.getElementById("myInputPileHeight"); filterHeight = inputHeight.value.toUpperCase(); inputType = document.getElementById("myInputType").value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); // Изначально подразумеваем что список у нас пустой empty = true; // Отбираем элемент NoResult noResult = document.getElementById("noResult"); // Цикл по всем элементам списка, и скрываем те блоки которые не соответствуют запросу введенному в поиск. if (filterWidth.indexOf('.') > -1) { filterWidth = filterWidth.slice(0, filterWidth.indexOf('.')) + ',' + filterWidth.slice((filterWidth.indexOf('.') + 1)); } if (filterHeight.indexOf('.') > -1) { filterHeight = filterHeight.slice(0, filterHeight.indexOf('.')) + ',' + filterHeight.slice((filterHeight.indexOf('.') + 1)); } for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; var size = parseSize(txtValue); if ( (filterSize && size && filterSize.w.min <= size.w && size.w <= filterSize.w.max && filterSize.h.min <= size.h && size.h <= filterSize.h.max) && txtValue.toUpperCase().indexOf(filterWidth) > -1 && txtValue.toUpperCase().indexOf(inputColor) > -1 && txtValue.toUpperCase().indexOf(filterHeight) > -1 && txtValue.toUpperCase().indexOf(inputType) > -1 ) { li[i].style.display = ""; empty = false; // Если найден хотя бы 1 элемент } else { li[i].style.display = "none"; } } if (empty) { noResult.style.display = "block"; // Если пустой список } else { noResult.style.display = "none"; } }
function myFunction() { function parseSize(value) { var result = value.replaceAll(',', '.').replaceAll(/[^d.]/g, ' ').match(/ *(d+(?:.d+)?) +(d+(?:.d+)?) */) if (result && result.length >= 3) { return { w: +result[1], h: +result[2], }; } return null; } var PERCENT = 15; var input, filter, ul, li, a, i, txtValue, empty, noResult, lis; inputLength = document.getElementById("myInputLength"); filterSize = parseSize(inputLength.value); if (filterSize) { filterSize.w = { min: filterSize.w * (1 - (PERCENT / 100)), max: filterSize.w * (1 + (PERCENT / 100)), }; filterSize.h = { min: filterSize.h * (1 - (PERCENT / 100)), max: filterSize.h * (1 + (PERCENT / 100)), }; } inputWidth = document.getElementById("myInputWidth"); filterWidth = inputWidth.value.toUpperCase(); inputColor = document.getElementById("myInputColor").value.toUpperCase(); inputHeight = document.getElementById("myInputPileHeight"); filterHeight = inputHeight.value.toUpperCase(); inputType = document.getElementById("myInputType").value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); // Изначально подразумеваем что список у нас пустой empty = true; // Отбираем элемент NoResult noResult = document.getElementById("noResult"); // Цикл по всем элементам списка, и скрываем те блоки которые не соответствуют запросу введенному в поиск. if (filterWidth.indexOf('.') > -1) { filterWidth = filterWidth.slice(0, filterWidth.indexOf('.')) + ',' + filterWidth.slice((filterWidth.indexOf('.') + 1)); } if (filterHeight.indexOf('.') > -1) { filterHeight = filterHeight.slice(0, filterHeight.indexOf('.')) + ',' + filterHeight.slice((filterHeight.indexOf('.') + 1)); } for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; var size = parseSize(txtValue); if ( (filterSize && size && filterSize.w.min <= size.w && size.w <= filterSize.w.max && filterSize.h.min <= size.h && size.h <= filterSize.h.max) && txtValue.toUpperCase().indexOf(filterWidth) > -1 && txtValue.toUpperCase().indexOf(inputColor) > -1 && txtValue.toUpperCase().indexOf(filterHeight) > -1 && txtValue.toUpperCase().indexOf(inputType) > -1 ) { li[i].style.display = ""; empty = false; // Если найден хотя бы 1 элемент } else { li[i].style.display = "none"; } } if (empty) { noResult.style.display = "block"; // Если пустой список } else { noResult.style.display = "none"; } }
- Алексей Уколов, Добрый день. Отвечаем только сегодня (Ваше сообщение пришло вчера вечером-уже после рабочего дня).
За код - благодарим (премного благодарны!), сейчас попробуем прикрутить - хоть мы и не кодировщики (мы торгуем коврами/ковролинами в размер заказчика).
Весь код, который есть на сайте, сделан нами методом "научно/ненаучного тыка" - потому и вид непрезентабельный.
Зато своими ручками...
Хорошего дня! - szQocks, Верно-нам "детали" объяснять бесполезно.
Мы вопрос задали с целью понять "можно так сделать или не можно".
В любом случае - огромное Вам человеческое спасибо за участие в обсуждении!!!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания фильтра с поиском размеров +-15% по значению типа 1,2*3,5, вам необходимо выполнить следующие шаги:
1. Создайте HTML форму, в которой пользователь будет вводить значение для поиска:
```html
```
2. На стороне сервера (например, в файле filter.php) обработайте отправленное значение и выполните поиск с учетом диапазона +-15%:
```php
= $min_size && $value <= $max_size) {
$results[] = $value;
}
}
// Выведите результаты поиска
if (!empty($results)) {
echo "Результаты поиска для размера $search_size:
";
foreach ($results as $result) {
echo $result . "
";
}
} else {
echo "Нет результатов для размера $search_size";
}
}
?>
```
3. После выполнения этих шагов, у вас будет рабочий фильтр с поиском размеров +-15% по значению типа 1,2*3,5. Пользователи смогут вводить значения и получать соответствующие результаты поиска.