问题描述
我正在为搜索表单中的选择按钮而苦恼。当您点击预算选择字段时,我正在尝试复制他们在 this website 上的内容。我想创建一个下拉菜单,其中包含每个价格范围的单选按钮。如果我能够通过 :sell_price_from 和 :sell_price_to 将价格范围发送到参数,这将有助于弹性搜索找到属性。到目前为止,我只能制作单选按钮(使用 f.radio_button )或选择下拉菜单(f.select ),但不能同时制作。
这就是我的表单现在的样子:
<div class="w-full mx-4 pt-32">
<div class="px-24">
<div class="rounded-t-xl overflow-hidden p-4">
<%= form_with model: @property,url: properties_path,method: :get,class: "",id: "search" do |f| %>
<div class="flex flex-row">
<div class="flex-1 w-auto min-h-0 min-w-0">
<div class="bg-white relative">
<%= f.label :q,"Search by keyword",class: "absolute left-8 top-4 text-sm text-black" %>
<%= f.text_field :q,placeholder: "Search",class: "text-base px-8 pt-10 pb-8 border-none bg-none outline-none w-full h-20 leading-8 font-light pb-0" %>
</div>
</div>
<div class="flex-1 w-auto min-h-0 min-w-0">
<div class="bg-white relative">
<%= f.label :sell_price,"Budget",class: "absolute left-8 top-4 text-sm text-black" %>
<div class="text-base px-8 pt-10 pb-8 border-none bg-none outline-none w-full h-20 leading-8 font-light">
<%= f.radio_button :sell_price_from,"100000" %>
<%= f.label :sell_price_from,"100.000" %>
<%= f.radio_button :sell_price_from,"200000" %>
<%= f.label :sell_price_from,"200.000" %>
</div>
</div>
</div>
<div class="flex-1 w-auto min-h-0 min-w-0">
<div class="bg-white relative">
<%= f.label :type,"Type",class: "absolute left-8 top-4 text-sm text-black" %>
<div class="text-base px-8 pt-10 pb-8 border-none bg-none outline-none w-full h-20 leading-8 font-light">
<%= f.collection_select :property_type,PropertyType.all,:name,{},{class: "border-0"} %>
</div>
</div>
</div>
<div class="flex-1 w-auto min-h-0 min-w-0">
<div class="bg-white relative">
<%= f.label :rooms,"Rooms",class: "absolute left-8 top-4 text-sm text-black" %>
<div class="text-base px-8 pt-10 pb-8 border-none bg-none outline-none w-full h-20 leading-8 font-light">
<%= f.select :rooms,["2","3","4"],{ },{class: "border-0"} %>
</div>
</div>
</div>
<div class="flex-none w-auto min-h-0 min-w-0">
<div class="">
<%= button_tag class: "bg-blue-500 text-white p-2 hover:bg-blue-400 focus:outline-none h-20 w-32 px-8 pt-10 pb-8 flex justify-center py-4 px-14 rounded-none text-base items-center whitespace-Nowrap" do %>
<i class="fas fa-search"></i>
<% end %>
</div>
</div>
</div>
<% end %>
</div>
</div>
</div>
问题基本上是,如何将单选按钮包装在选择下拉列表中?