накалякано мной по вопросам от @бродяга (насуйте ему плюсов за вдохновение хд)
вот тут лежит штука, которая генерит рабочие фильтры по словарю поля на название фильтра -> https://vpomoike.mybb.ru/pages/seks_s_filtrami
код там более актуальный, потому что подсасывается налету, разберу некоторые нюансы на текущем варианте

<style>
.hidden {display: none !important;}
</style>

отсюда уносить нежелательно, но если очень хочется, то можно унести в стили без тегов style. Из нюансов: если у итема будут прописаны стили с display с important - начнется легкая рулетка на тему "кто позже и у кого чспецифичность выше"

<div id="my_works">
<div class="filters"></div>
<div class="items">
<div class="item" data-year="2001" data-available="" data-person="John Doe">про первую работу весело красиво</div>
<div class="item" data-year="2003" data-person="Ivan Ivanov">про вторую работу весело красиво</div>
<div class="item" data-year="2001" data-person="Ivan Ivanov">про третью работу весело красиво</div>
</div>
</div>

просто верстка вашей будущей фильтруемой красоты
Важно, чтобы
-был итем (любой, хоть див, хоть что) с id заданным тут

то бишь в данном случае my_works, это чтобы он все соседние подобные блоки не пытался перелопатить левыми фильтрами хд

-в этом блоке на любой глубине был итем (аналогично любой) с классом заданным тут

туда он будет присобачивать собсно фильтры

-итемсы лежали в итеме (снова любом) с классом заданным тут

- можно в целом сделать пустую строку и забить, это больше перестраховочка на самом деле

const filterFieldToFilter = {
//по умолчанию - селект из всех найденных значений
"person": {name: "Знаменитость"},
"year": {name: "Год"},
//Для да-нет будем рисовать селект из пунктов "да/нет/все"
"available": {name: "Доступно для использования", type: "boolean"}
};

Штука, на основе которой творится вся магия.
*По умолчанию (если тип не указан) оно просто берет все значения из data-${code} и фигачит селект с этими вариантами + вариант "все", вырубающий фильтрацию.
*Если указан тип boolean - оно делает селект из пунктов все/да/нет. Как "нет" оно воспринимает отсутствие соответствующего data-${code} или значение data-${code}="false"
*Когда-нибудь я клянусь добавить туда range, more, less и search, но пока их нет. Предварительно - range это два инпута про числа, more и less - один инпут про числа (больше/меньше), search - про "подстрока присутствует в атрибуте"

const idPrefix = "my_works"
const itemsContainerClassname = 'items';
const itemClassname = 'item';
const filtersContainerClassname = 'filters'

на всякий случай продублирую блок где задаются селекторы хд

Пример сгенерированных фильтров:

<div class="filters">
<div id="my_works-filter-person-wrapper" class="wrapper">
<label for="my_works-filter-person">Знаменитость</label>
<select id="my_works-filter-person">
<option label="Все"></option>
<option label="Ivan Ivanov" value="Ivan Ivanov"></option>
<option label="John Doe" value="John Doe"></option>
</select>
</div>
<div id="my_works-filter-year-wrapper" class="wrapper">
<label for="my_works-filter-year">Год</label>
<select id="my_works-filter-year">
<option label="Все"></option>
<option label="2001" value="2001"></option>
<option label="2003" value="2003"></option>
</select>
</div>
<div id="my_works-filter-available-wrapper" class="wrapper">
<label for="my_works-filter-available">Доступно для использования</label>
<select id="my_works-filter-available">
<option label="Все"></option>
<option label="Да" value="true"></option>
<option label="Нет" value="false"></option>
</select>
</div>
</div>

как можно заметить, оно насовывает в .${filtersContainerClassname} блоков с id обертки конкретного фильтра и классом wrapper, в которых лежат подпись и собственно сам фильтр - украшайте выплюнутое на здоровье(с)

Отредактировано Emerael (19.11.23 00:39)

А подобные фильтры можно делать и для bb кодов?

Помогите найти! (Ищу скрипт/код) #2, накидано мной
теги из фильтров: userprof, posts, mybb-ru, css, js, spoilers

Отредактировано Emerael (29.03.24 18:15)