我目前正在使用ROR从API中提取数据，并使用Jquery Masonry在我的应用中显示结果。我现在试图让用户在页面加载后以几种不同的方式对数据进行排序。我希望有人能够按以下方式对数据进行排序：＆＃34;本周＆＃34;，＆＃34;下周＆＃34;和＆＃34;下个月＆＃34;。此外，我想创建一些预定义的过滤器，用户可以选择进一步过滤他们的结果，例如：＆＃34; sports＆＃34;，＆＃34; outdoors＆＃34;，＆＃34; fitness＆＃34 ;，＆＃34;徒步旅行＆＃34;，＆＃34;跑步＆＃34;，＆＃34;骑自行车＆＃34;有没有办法运行一个脚本，在页面中搜索这些特定的关键字，然后消除不匹配的结果？我已经在JS @所有的鸽子，所以任何帮助将不胜感激。
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/" style="padding:0">
<img src="../images/logo.png" class="logo">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-search-from" id="bs-example-navbar-collapse-1">
<form role="form" data-toggle="validator" action="search">
<div class="form-inline search-form">
<div class="form-group search-box">
<input type="text" name="zipcode" class="form-control input-box" placeholder="Enter Zipcode" value="<%= @zipcode %>"required>
</div>
<div class="form-group search-box">
<%= select_tag "radius", options_for_select(Radius::RADIUS, @radius), {"onChange" => "changeRadius(this)", class: "form-control"} %>
</div>
<!--<div class="form-group search-box">-->
<!--<input type="text" id="filter" class="form-control input-box" placeholder="Filter" value="<%= @keyword %>"> -->
<!--</div>-->
<div class="form-group search-box">
<button type="submit" class="search-button btn btn-success">
<i class="glyphicon glyphicon-search"></i>
<span>Search</span>
</button>
</div>
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="content">
<div class="event-container grid">
<% if @fitness_events %>
<% @fitness_events.each do |fitness_event| %>
<div class="grid-item">
<div class="event-list-container">
<%= link_to "Register for event", {:controller => "meetup_events", :action => "detailed_event", :event => fitness_event['id'], :zip => @zipcode, :radius => @radius }, class: "join-button btn btn-success hidden" %>
<div class="row event-listing clearfix doc-padding">
<p class="event-name"><%= fitness_event['name'] %></p>
<% if fitness_event['photo'] %>
<div class="">
<%= image_tag fitness_event['photo'], :class => "event_photo" %>
</div>
<% end %>
</div>
<div class="row heart-time">
<div class="col-sm-3 col-xs-3">
<span class="glyphicon glyphicon-heart"></span>
<%= fitness_event['yes_rsvp_count'] %>
</div>
<div class="col-sm-9 col-xs-9 created-time">
<span class="glyphicon glyphicon-time"></span>
<%= Time.at(fitness_event['time']/1000).strftime("%b %e, %I:%M %p") %>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 location">
<% if fitness_event['venue'] %>
<i class="glyphicon glyphicon-map-marker"></i>
<%= fitness_event['venue']['address_1'] %>
<% end %>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 location">
<% if fitness_event['group'] %>
<i class="fa fa-users"></i>
<%= fitness_event['group']['name'] %>
<% end %>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 description">
<% if fitness_event['desc'] %>
<i class="fa fa-file-text"></i>
<%= fitness_event['desc'] %>
<% end %>
</div>
</div>
<div class="row">
<%= link_to "Register for event", {:controller => "meetup_events", :action => "join", :event => fitness_event }, class: "join-button btn btn-success pull-right", target: "_blank" %>
</div>
</div>
</div>
<% end %>
<% end %>
<% if @outdoor_events %>
<% @outdoor_events.each do |event| %>
<div class="grid-item">
<div class="event-list-container">
<%= link_to "Register for event", {:controller => "meetup_events", :action => "detailed_event", :event => event['id'], :zip => @zipcode, :radius => @radius }, class: "join-button btn btn-success hidden" %>
<div class="row event-listing clearfix doc-padding">
<p class="event-name"><%= event['name'] %></p>
<% if event['photo'] %>
<div class="">
<%= image_tag event['photo'], :class => "event_photo" %>
</div>
<% end %>
</div>
<div class="row heart-time">
<div class="col-sm-3 col-xs-3">
<span class="glyphicon glyphicon-heart"></span>
<%= event['yes_rsvp_count'] %>
</div>
<div class="col-sm-9 col-xs-9 created-time">
<span class="glyphicon glyphicon-time"></span>
<%= Time.at(event['time']/1000).strftime("%b %e, %I:%M %p") %>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 location">
<% if event['venue'] %>
<i class="glyphicon glyphicon-map-marker"></i>
<%= event['venue']['address_1'] %>
<% end %>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 location">
<% if event['group'] %>
<i class="fa fa-users"></i>
<%= event['group']['name'] %>
<% end %>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 description">
<% if event['desc'] %>
<i class="fa fa-file-text"></i>
<%= event['desc'] %>
<% end %>
</div>
</div>
<div class="row">
<%= link_to "Register for event", {:controller => "meetup_events", :action => "join", :event => event }, class: "join-button btn btn-success pull-right", target: "_blank" %>
</div>
</div>
</div>
<% end %>
<% end %>
<% if @sports_events %>
<% @sports_events.each do |event| %>
<div class="grid-item">
<div class="event-list-container">
<%= link_to "Register for event", {:controller => "meetup_events", :action => "detailed_event", :event => event['id'], :zip => @zipcode, :radius => @radius }, class: "join-button btn btn-success hidden" %>
<div class="row event-listing clearfix doc-padding">
<p class="event-name"><%= event['name'] %></p>
<% if event['photo'] %>
<div class="">
<%= image_tag event['photo'], :class => "event_photo" %>
</div>
<% end %>
</div>
<div class="row heart-time">
<div class="col-sm-3 col-xs-3">
<span class="glyphicon glyphicon-heart"></span>
<%= event['yes_rsvp_count'] %>
</div>
<div class="col-sm-9 col-xs-9 created-time">
<span class="glyphicon glyphicon-time"></span>
<%= Time.at(event['time']/1000).strftime("%b %e, %I:%M %p") %>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 location">
<% if event['venue'] %>
<i class="glyphicon glyphicon-map-marker"></i>
<%= event['venue']['address_1'] %>
<% end %>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 location">
<% if event['group'] %>
<i class="fa fa-users"></i>
<%= event['group']['name'] %>
<% end %>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 description">
<% if event['desc'] %>
<i class="fa fa-file-text"></i>
<%= event['desc'] %>
<% end %>
</div>
</div>
<div class="row">
<%= link_to "Register for event", {:controller => "meetup_events", :action => "join", :event => event }, class: "join-button btn btn-success pull-right", target: "_blank" %>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
<% if @fitness_events.empty? && @outdoor_events.empty? && @sports_events.empty? %>
<p class="no-result">No Search Result</p>
<% end %>
</div>
<script src="https://cdnjs.com/libraries/1000hz-bootstrap-validator"></script>
<script src="https://unpkg.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<script>
// var grid = document.querySelector('.grid');
//
// $(window).load(function(){
// $('.grid').masonry({
// // options...
// itemSelector: '.grid-item',
// gutter: 10
// });
// });
$(window).ready(function(){
// init Masonry
var $grid = $('.grid').masonry({
// options...
itemSelector: '.grid-item',
gutter: 10
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
});
// var msnry = new Masonry( grid, {
//// // options...
//// columnWidth: 20,
//// fitWidth: true,
// itemSelector: '.grid-item',
// gutter: 10
// });
// $("div.grid-item").click(function() {
// window.location=$(this).find("a").attr("href"); return false;
// });
function changeRadius(x){
radius = x.value;
}
</script>