ruby-on-rails - 在 Rails 5.2 中使用 materializeCss 卡片创建复选框
问题描述
我正在使用 Ransack 构建一个带有一些过滤器的 Rails 应用程序,我不希望用户能够使用如下图所示的卡片搜索属性。当他们在我的数据库中选择一张将返回的卡时。
我目前的搜查表格
<%= search_form_for @q, html: {autocomplete: 'off'} do |f| %>
<div class="container">
<div class="row">
<!--APARTMENT CARD-->
<div class="col l6 s6">
<div class="card-panel hoverable b-radius5px">
<img style="width:60px;" class="center" src="https://res.cloudinary.com/craftwebs/image/upload/v1584137944/condominium_pltgkr.svg" alt="">
<span class="center blue-grey-text text-lighten-2" style="margin-left: -15px;">Apartment</span>
</div>
</div>
<!--HOUSE CARD-->
<div class="col l6 s6">
<div class="card-panel hoverable z-depth-1 b-radius5px">
<img style="width:60px;" class="center" src="https://res.cloudinary.com/craftwebs/image/upload/v1584138119/real-estate_mugxx7.svg" alt="">
<span class="center blue-grey-text text-lighten-2">House</span>
</div>
</div>
<div class="center">
<%= f.submit "Search", class:" waves-effect blue-kafasa-bn waves-light btn b-radius15px" %>
</div>
现在,我能够搜索这些属性的唯一方法是通过选择:
<div class="col l6 m6 s12">
<%= f.select(:propertytype_eq, options_for_select(['Apartment', 'Office', 'House' ]), {:include_blank => 'Pick a property'} ) %>
</div>
这是当我使用select在我的应用程序中搜索特定属性时它在我的日志中的外观:
Parameters: {"utf8"=>"✓", "q"=>{"price_gteq"=>"", "price_lteq"=>"", "propertytype_eq"=>"Apartment"}, "commit"=>"Search"}
如何让用户使用卡片而不是选择来搜索属性?我需要修改物化复选框吗?
解决方案
您是否尝试对卡片使用 onclick 功能?您可以添加一个 onclick 事件来启动导航或为您想要的选项设置标志/变量。
推荐阅读
- ios - 如何在uitextfield编辑的边框线上添加占位符文本
- r - R从互联网加载数据并同时删除列
- java - 为什么要在另一个列表中投射列表
- jquery - 带有经典 ASP 的 FullCalender.io
- maven - Maven:如何管理从一个子模块到另一个子模块的依赖关系
- .net - 如何配置交换槽功能?目前在部署后我仍然看到旧版本的网络应用程序
- android - 半透明Activity下的Activity缺少onSaveInstanceState调用
- angular - 如何将 forkJoin 数据分配给变量?
- r - 包来估计具有随机效应的生存函数?
- java - Spring Batch remore 分区添加从属运行时