这是我的设计。
https://i.stack.imgur.com/AmP24.png
在get请求中，我从MongoDB数据库获取数据并呈现视图。现在我想根据表单上的用户输入过滤数据。
这样做的最佳方法是什么？
这是ejs模板：
<div class="row">
<% events.forEach((event) => { %>
<div class="col-lg-6 g-mb-30">
<!-- Event Listing -->
<span class="badge g-font-size-13"><%-event.type%></span>
<article class="u-shadow-v39">
<div class="row">
<div class="media-body g-pt-40 col-4 text-center g-bg-main">
<span class="g-color-orange g-font-weight-500 g-font-size-40 g-line-height-0_7"><%-event.date.getMonth()%></span>
<span class="g-line-height-0_7 g-color-white"><%-monthNames[event.date.getMonth()]%></span>
<span class="g-color-orange g-ml-5 g-font-weight-500 g-font-size-40 g-line-height-0_7"><%-event.date.getFullYear()%></span>
</div>
<div class=" col-8 g-mb-5 g-mt-10 ">
<% event.topics.forEach((topic) => { %>
<%if(event.topics.length==1){%>
<h3 class=" text-center g-pt-35 g-mb-0 u-link-v5 g-color-orange g-color-primary--hover g-font-size-18 g-pr-10">
<% }else{%>
<h3 class=" text-center g-mb-0 u-link-v5 g-color-orange g-color-primary--hover g-font-size-18 g-pr-10">
<% }%>
<%-topic.topic%> </h3>
<div class=" text-center u-link-v5 g-color-main g-color-primary--hover g-font-size-18 g-mb-5"><i class="icon-education-097 g-pr-5"></i> <%-topic.time%></div>
<% })%>
<h3 class=" text-left g-pb-10 g-mb-0 u-link-v5 g-color-purple g-color-primary--hover g-font-size-18 g-pr-10"><i class="icon-travel-078 g-pr-5"></i> <%-event.location%></h3>
</div>
</div>
</article>
</div>
<% }) %>
</div>
这是获取请求
//events
function getEvents(req,res,next){
mongo.find('events','',function(err,res){
if(!err){
req.events=res;
return next();
}
})
}
function renderEvents(req,res){
res.render('layouts/events',{events:req.events,
monthNames : ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"]});
}
app.get('/events',getEvents,renderEvents);
答案 0 :(得分：0)
嗯，你真的只有两个选择：在客户端做或者在服务器端做 - 你可以通过扩展你现有的路线来做。
选项＃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();
}
})
}