Как сделать фильтр с поиском размеров +-15% по значению типа 1,2*3,5 -?

Question

[Vlad Bad]

Есть список, в котором значения ширина/длина указаны как 1,2*3,5. Нужно, чтобы фильтр сделал поиск каждого размера +-15% и выдал все результаты поиска (при вводе 1,2*3,5 в строку поиска).

Answer 1

[Алексей Уколов]

Порядок решения такой:

1. Разбиваете введённую строку на два числа.
   
2. Для каждого числа определяете диапазон, умножив его на 0,85 и 1,15.
   
3. У каждого элемента списка разбиваете его строку с размерами на два числа функцией из п.1 и проверяете, входят ли они в нужный диапазон.
   

Хоть какую-то сложность тут может представлять только нормализация строки, если она требуется. Т.е. если требуется обрабатывать строку, например, и в формате "1.2x3.5", помимо приведённого в вопросе, то придётся немного заморочиться с определением где там числа. Но, на самом деле и тут всё довольно просто: заменяем запятые на точку, а всё, что не цифра и не точка заменяем на пробел. А дальше уже регуляркой легко получить из получившейся строки два числа.

Comments

[Vlad Bad]

Правильно понимаю, что без "разбивки на два значения" проблема не решается?

[Алексей Уколов]

Может, и решается, но такое решение будет в разы сложнее.

UPD: Хотя нет, не думаю, что можно обойтись без разбивки. Так или иначе введённую строку вам нужно разделить на числа, чтобы определить границы этих +-15%. Дальше уже можно будет заморочиться и не делить значения поля в элементах списка, но это будет извращение при наличии уже готовой функции парсинга строки.

[szQocks]

Vlad Bad, а что вообще значит +-15% ? границы больше меньше 15 при умножении чисел или что ? тогда какой делать фильтр больше 15 или меньше 15 ?

[Vlad Bad]

Алексей Уколов, заменить запятую на точку - это легко решаемо. А вот вид 1.2*3.5 (или 0.98*2.15 и т.д.) - очень желательно оставить в неизменном виде, поскольку уже есть огромный список (в проекте) и что-либо изменять крайне затратно по времени. Подскажите, куда можно обратиться для решения этого вопроса? (я не программист, от слова "совсем")

[Vlad Bad]

szQocks, например, клиенту нужен размер ковра 1.2*3.5м , и нужно, чтобы при введенном (клиентом) значении 1,2*3,5 в поиске отобразились все результаты, находящиеся в списке, с размерами от 1,02*2,97 до 1,32*4,02 (м). Это нужно для того, чтобы отобразить в результатах поиска все "близкие по размеру" ковры, потому как нужный размер (1,2*3,5):
1- может отсутствовать на данный момент времени
2 - у клиента появляется возможность выбрать близкий по размеру, но более подходящий по расцветке ковер

[szQocks]

Vlad Bad, ну тогда Алексей правильно ответил

Разбиваете введённую строку на два числа.
Для каждого числа определяете диапазон, умножив его на 0,85 и 1,15.

после этого остаётся лишь от данных которые получились - искать нужные размеры в списке

P.S и разбить строку на числа - не значит что изменить список полностью, ну то есть если не мутировать сам список или не изменять - то он останется таким который был

[szQocks]

Vlad Bad,

1- может отсутствовать на данный момент времени
2 - у клиента появляется возможность выбрать близкий по размеру, но более подходящий по расцветке ковер

ну эти мелочи, это уже дополнительная логика, никто тут целый багаж писать кода не будет для ваших хотелок, тут лишь подсказать могут, пример написать минимальный ну и всё

если нужен исполнитель, вам на фриланс надо идти

[Vlad Bad]

szQocks, и ещё один вопрос дилетанта: нельзя-ли сделать скрипт, чтобы (1,2) - число "до звездочки", поискать по признаку +-15%, и (3,5) - число "после звездочки", поискать по признаку +-15% - ?

[szQocks]

Vlad Bad, можно - то что вы спросили - это та же самая задача , которую вы спрашивали изначально

[Vlad Bad]

szQocks, да я пойду, куда скажете (только, лишь-бы , в правильном направлении послали:))) главное понять "это можно-не можно" - чтобы в неизменном виде размер 1,2*3,5 "искался с допусками по размерам". Про разбивку на два числа - я уже понял, но этот вариант не совсем устраивает.

[szQocks]

Vlad Bad,

чтобы в неизменном виде размер 1,2*3,5 "искался с допусками по размерам". Про разбивку на два числа - я уже понял, но этот вариант не совсем устраивает.

- разбить на числа - это временная операция, это вообще не как не отразиться на вашей строке которая изначально там '1,2*3,5', если напрямую её не изменять ( и вряд ли это кто-то будет делать )

так же фильтровать список - если его не изменять напрямую - то он так же останется каким и был, из строк

но отфильтрованный новый список - вы получите, кароче если вы не разраб - думаю нет смысла объяснять как эта шляпа работает

[Vlad Bad]

Тема для нас "горячая", потому как список уже огромен и клиентам нужно как-то в нём искать "нужный товар".
Фильтр нам сделали но, пока "без обсуждаемой здесь функциональности".
Если кому-то интрересно, то фильтр здесь (спрятан под тремя полосками):
https://mirpalasov.ru/wp-content/uploads/2018/04/i...
Благодарю за участие в обсуждении.

[szQocks]

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";
    }
}

[Vlad Bad]

Алексей Уколов, Добрый день. Отвечаем только сегодня (Ваше сообщение пришло вчера вечером-уже после рабочего дня).
За код - благодарим (премного благодарны!), сейчас попробуем прикрутить - хоть мы и не кодировщики (мы торгуем коврами/ковролинами в размер заказчика).
Весь код, который есть на сайте, сделан нами методом "научно/ненаучного тыка" - потому и вид непрезентабельный.
Зато своими ручками...
Хорошего дня!

[Vlad Bad]

szQocks, Верно-нам "детали" объяснять бесполезно.
Мы вопрос задали с целью понять "можно так сделать или не можно".
В любом случае - огромное Вам человеческое спасибо за участие в обсуждении!!!