Как сделать такой поиск?

Question

[dzho]

Как реализовать такой поиск на на клиенте?
есть список квартир c
названием
цена за сутки
координаты
доступные удобства

Нужно сделать сортировку как в скриншоте

Вариант: Создать массив. По события key на поиске выводить фильтрацию через функцию filter

Answer 1

[Дмитрий Лузанов]

Обратиться за помощью к специалистам

Comments

[dzho]

Отличное решение, но не самое лучшее. Мне интересно в какую сторону копать чтобы сделать такое.

[Дмитрий Лузанов]

dzho: js, ajax, vue.js, Angular, React и ещё куча всего

[Дмитрий Лузанов]

dzho: какой вопрос такой и ответ -__-

[dzho]

Predve4niy: Мне интересно через js, я написал вариант как я считаю выше -__-

Answer 2

[Nwton]

У вас есть база с квартирами. Каждый блок данных о квартире содержит конкретные поля с конкретными названиями. При запросе данных из базы вы формируете запрос на основе установленных фильтров, приравнивая соответствующие поля соответствующим фильтрам. Сам фильтр на клиенте - это набор селектов и инпутов, не более того. Что конкретно вам не понятно? Что вы уже успели накодить?

Уверен, вы даже не гуглили ничего, сразу прибежали просить помощи. Иначе ваш вопрос не был бы таким общим. С таким подходом далеко не уедите.

Answer 3

[Кирилл Жулин]

Рассказываю:

<div>
	<div><label id="10">хрень 1-1</label><input id="1" type="radio"><label id="20">хрень 1-2</label><input id="20" type="radio"><label id="30">хрень 1-3</label><input id="30" type="radio"></div>
	<div><label id="11">хрень 2-1</label><input id="11" type="radio"><label id="21">хрень 2-2</label><input id="21" type="radio"><label id="31">хрень 2-3</label><input id="31" type="radio"></div>
	<div><label id="12">хрень 3-1</label><input id="12" type="radio"><label id="22">хрень 3-2</label><input id="22" type="radio"><label id="32">хрень 3-3</label><input id="32" type="radio"></div>
</div>

div - вообще заменить надо на конструкцию

<ul>
<li></li>
<li></li>
<li></li>
</ul>
будет вообще прекрасно)))
хотя кому как нравится; с li меньше кода в css)))

+ css :
xozblog.ru/2012/10/checkbox-radio-css3
cssdeck.com/labs/sliding-radio-button-menu (не показывает пример но рабочее)
а это полезно shpargalkablog.ru/2013/08/checked.html