Ну, у вас действительно есть только 2 варианта: сделать это на стороне клиента ИЛИ сделать это на стороне сервера - что вы можете сделать, расширив существующий маршрут.
Option #1: Клиентская сторона
Вы бы прикрепили обработчик событий onclick к кнопке поиска.Нажав кнопку, вы отфильтруете события DOM, показывая или скрывая элементы, которые соответствуют критериям формы.Чтобы определить, соответствуют ли события критериям, вам необходимо извлечь информацию из DOM.Когда вы создаете HTML-код для событий, было бы неплохо добавить значимые классы, чтобы упростить извлечение информации.
Ниже приведен упрощенный пример.
// not sure if you are using jQuery, but we'll use vanilla JS
// though the former makes it easier to do things
window.onload = function() {
// get references to all elements we'll be using
var searchForm = document.getElementById('search-form'),
typeSelect = searchForm.elements['type'],
monthSelect = searchForm.elements['month'],
yearSelect = searchForm.elements['year'],
searchBtn = document.getElementById('search-btn'),
eventList = document.getElementsByClassName('event');
// create an onclick handler for your search button
searchBtn.onclick = function() {
// get form values
var searchType = typeSelect.value,
searchMonth = monthSelect.value,
searchYear = yearSelect.value;
// filter events based on form values
for (var i = 0, len = eventList.length; i < len; i++) {
var event = eventList[i];
// extract values from event thanks to the class names
var eventType = event.getElementsByClassName('type')[0].innerText,
eventDate = event.getElementsByClassName('date')[0].innerText;
var match =
(!searchType || searchType === eventType) &&
(!searchMonth || eventDate.indexOf(searchMonth) > -1) &&
(!searchYear || eventDate.indexOf(searchYear) > -1);
// show event if it matches criteria
event.style.display = match ? 'block' : 'none';
}
};
}
.event,.row{overflow:hidden}label{display:block}form{overflow:hidden;width:300px}.row{padding:5px 0;}.row .col{float:left;width:45%;padding:5px;}.event{margin-bottom:10px}.event .date{background:navy;clear:left;color:orange;height:150px;float:left;line-height:150px;text-align:center;width:150px}.event .content{float:left;padding-left:5px}
<form id="search-form">
<div class="row">
<div class="col">
<label>Events Type</label>
<select name="type">
<!-- leave first option blank -->
<option value="">All</option>
<option>Conference</option>
<option>Field Trip</option>
<option>ET Lab</option>
</select>
</div>
<div class="col">
<label>Month</label>
<select name="month">
<option value="">All</option>
<option>August</option>
<option>October</option>
<option>December</option>
<!-- etc -->
</select>
</div>
</div>
<div class="row">
<div class="col">
<label>Year</label>
<select name="year">
<option value="">All</option>
<option>2018</option>
<option>2017</option>
</select>
</div>
<div class="col">
<button type="button" id="search-btn">Search</button>
</div>
</div>
</form>
<h4>All Events</h4>
<!-- when you build your events, use meaningful class names as we will need it later -->
<div class="event-list">
<div class="event">
<div class="type">Conference</div>
<div class="date">9 October 2017</div>
<div class="content">
<div class="title">Robots & Bridge</div>
<div class="time">4:00 PM to 5:00 PM</div>
</div>
</div>
<div class="event">
<div class="type">Field Trip</div>
<div class="date">11 December 2017</div>
<div class="content">
<div class="title">Newtown Creek</div>
<div class="time">10:00 AM to 12:00 PM</div>
</div>
</div>
<div class="event">
<div class="type">ET Lab</div>
<div class="date">7 August 2018</div>
<div class="content">
<div class="title">Robots</div>
<div class="time">4:00 PM to 5:00 PM</div>
</div>
</div>
<div class="event">
<div class="type">Field Trip</div>
<div class="date">11 August 2017</div>
<div class="content">
<div class="title">Lab Ribbon Cutting</div>
<div class="time">4:00 PM to 5:00 PM</div>
</div>
</div>
</div>
Опция # 2: на стороне сервера
Расширение обработчика GET /events для принятия дополнительныхно необязательные параметры запроса для типа, месяца, года.Я не буду вдаваться в подробности, как в предыдущем случае, но вы измените свою форму, чтобы она могла отправлять.
<form method="GET" action="path/events">
<!-- etc -->
<button type="submit">Search</button>
</form>
Затем в вашем обработчике GET /events
function getEvents(req,res,next){
var query = {};
if (req.query.type) {
// do something to the query with type
}
if (req.query.month) {
// do something to the query with month
}
if (req.query.year) {
// do something to the query with year
}
// use query in your find() call
// i am not too familiar with mongo but there should be a way to build queries -- i hope
mongo.find( ... ,function(err,res){
// everything else stays the same
if(!err){
req.events=res;
return next();
}
})
}