Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Фильтр на "чистом" javascript (https://javascript.ru/forum/events/67957-filtr-na-chistom-javascript.html)

slavAAvals 17.03.2017 11:24

Фильтр на "чистом" javascript
 
Имеется сайт:
http://paqura616.h1n.ru/mypoems.php

Подгружаются данные из базы данных

<div class="poems-list" >
		<?php
	     	while( ($row = mysqli_fetch_assoc($result)) ) {
				echo '<div class="poems-list__item">';
				echo '<h2 class="poems-title">' . $row['title'] . '</h2>';
				echo '<p class="poems-content">' . $row['text'] . '</p>';
				echo '<span class="poems-date">' . $row['date'] . '</span>';
				echo '</div>';
			}
		?>
	</div>


Вопрос: как отфильтровать входящие данные по автору/дате и т.д.

Важен даже не сам конкретный пример, а общая реализация таких фильтров.
По теме совсем ничего нет конкретного в поиске. Абсолютное большинство найденных ответов - ворпрессовские фильтры, jquery и т.д.

Alexandroppolus 17.03.2017 11:45

на js недавно фильтровали
http://javascript.ru/forum/misc/6793...ogo-slova.html

slavAAvals 17.03.2017 12:14

Я бы сказал, что это немного не то.
Это всё же больше поиск, чем фильтр.

Покажу абстрактный пример:

<select name="select-lang" id="lang" >
  <option value="rus">Русский</option>
  <option value="eng">Англ.</option>
  <option value="span">Испанский</option>
</select>

<label for="verl">Верлибр</label>
<input type="checkbox" id="verl"/>

<label for="novel">Проза</label>
<input type="checkbox" id="novel"/>

<label for="poem">Стишок</label>
<input type="checkbox" id="poem"/>


Как на основе этого оставлять выбранные пункты?

рони 17.03.2017 12:20

slavAAvals,
:-?

slavAAvals 17.03.2017 12:23

Я неправильно задаю вопросы, да?)

Или использую не те инструменты для реализации?

рони 17.03.2017 12:47

slavAAvals,
недостаточно информации, что фильтровать, html блоки c rus poem -- как они связаны с фильтрами классами или дата- атрибуты

рони 17.03.2017 12:51

Цитата:

Сообщение от slavAAvals
общая реализация таких фильтров

идти циклом по блокам и проверять условие для показа или скрытия

slavAAvals 17.03.2017 13:07

Я просто никогда не имел дело с такими вещами, честно говоря. Решил разобраться наконец.
И пока что не понимаю, возможно, самых глупых и банальных вещей.
Попробуй ещё раз объяснить

<div class="poems-list" >
		<?php
	     	while( ($row = mysqli_fetch_assoc($result)) ) {
				echo '<div class="poems-list__item">';
				echo '<h2 class="poems-title">' . $row['title'] . '</h2>';
				echo '<p class="poems-content">' . $row['text'] . '</p>';
				echo '<span class="poems-date">' . $row['date'] . '</span>';
				echo '</div>';
			}
		?>
</div>


Это то, что генерируется на странице.
Получается длинный список, удлиняющийся со временем.
Я хочу привязаться (вот тут первый вопрос: как?) к этим данным с помощью фильтра.

// Тут я имею ввиду, что текст будут на разных языках и чтобы при выборе одно из элементов в списке, те, что не имеют данного свойства удалялись из дома или прятались
<select name="select-lang" id="lang" >
  <option value="rus">Русский</option>
  <option value="eng">Англ.</option>
  <option value="span">Испанский</option>
</select>

// так же тут
<label for="verl">Верлибр</label>
<input type="checkbox" id="verl"/>

<label for="novel">Проза</label>
<input type="checkbox" id="novel"/>

<label for="poem">Стишок</label>
<input type="checkbox" id="poem"/>



Надо для начала к .poems-list__item добавлять атрибут rus, например или как это делается...

рони 17.03.2017 13:17

slavAAvals,
как вам удобнее
<div data-lang="rus" data-category="poem"></div>
<div class="rus poem"></div>


Часовой пояс GMT +3, время: 09:15.