在 Rails 5.2 中使用 materializeCss 卡片创建复选框

Question

我正在使用 Ransack 构建一个 Rails 应用程序，其中包含一些过滤器，我不希望用户能够使用下图中的卡片搜索属性。当他们 select 我的数据库中的一张卡将 return。

我当前的 Ransack 表格

    <%= 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>

现在，我能够搜索这些属性的唯一方法是通过 select:

<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"}

如何让用户使用卡片搜索属性而不是 select？我需要修改具体化复选框吗？

Answer 1

您是否尝试过对卡片使用 onclick 函数？您可以添加一个 onclick 事件来启动导航或为您想要的选项设置 flag/variable。

在 Rails 5.2 中使用 materializeCss 卡片创建复选框

Create checkboxes with materializeCss cards in Rails 5.2

ruby-on-rails

materialize

ransack

ruby-on-rails-5

如何让用户使用卡片搜索属性而不是 select？我需要修改具体化复选框吗？

在 Rails 5.2 中使用 materializeCss 卡片创建复选框

Create checkboxes with materializeCss cards in Rails 5.2

ruby-on-rails

materialize

ransack

ruby-on-rails-5

如何让用户使用卡片搜索 属性 而不是 select？我需要修改具体化复选框吗？

如何让用户使用卡片搜索属性而不是 select？我需要修改具体化复选框吗？