Ruby on Rails - 将文本字段与Select结合使用?

时间:2018-06-01 13:58:36

标签: javascript jquery html ruby-on-rails ruby-on-rails-5

我想要一个文本字段,当用户按下它时,会出现一些可能的选项,例如带有选项(或数据列表)的下拉列表。像这样:

enter image description here

是否有任何宝石或图书馆能为我做到这一点?或者有一个很好的例子如何正确地做到这一点?我试图搜索,但也许我没有提出正确的问题,因为我找不到太多东西......

编辑:

关于我的项目:

我正在做一个汽车网站,所以我需要按价格,年份,公里等过滤汽车...这就是为什么我需要一个用户可以放置的文本字段,例如,他们的价格范围,但作为同时我想展示一些他们也可以选择的选项。这些选项是静态的,它们不是来自任何模型。

然后我将使用:price_start和:price_ending来执行named_scope来过滤数据。

这是我的模特:

create_table "vehicles", force: :cascade do |t|
  t.integer "kms"
  t.integer "power"
  t.string "transmission"
  t.string "fuel"
  t.string "category"
  t.integer "seats"
  t.integer "doors"
  t.string "color"
  t.string "condition"
  t.string "warranty"
  t.datetime "created_at", null: false
  t.datetime "updated_at", null: false
  t.integer "model_id"
  t.integer "manufacturer_id"
  t.float "cc"
  t.string "version"
  t.integer "price"
  t.integer "month"
  t.integer "year"
  t.index ["manufacturer_id"], name: "index_vehicles_on_manufacturer_id"
  t.index ["model_id"], name: "index_vehicles_on_model_id"
end

我的索引:

<%= form_tag(filter_vehicles_path, method: 'get') do %>
<h4><strong>

  <span>Fabricante</span>
  <%= collection_select :manufacturer, :manufacturer_id, Manufacturer.joins(:vehicles).uniq, :id, :name, {include_blank: true}, {class: "manufacturer_dropdown"} %>

  <span>Modelo</span>
  <%= grouped_collection_select :model, :model_id, Manufacturer.order(:name), :models, :name,  :id, :name, {include_blank: true}, {class: "model_dropdown", data: {models: @models}} %>

  <span>Preço</span>
  <%= select_tag :price_start, options_for_select([ "250 EUR", "500 EUR", "1000 EUR", "2000 EUR", "3000 EUR", "4000 EUR", "5000 EUR", "6000 EUR", "7000 EUR", "8000 EUR", "9000 EUR", "10 000 EUR", "12 000 EUR", "14 000 EUR", "16 000 EUR", "18 000 EUR", "20 000 EUR", "22 000 EUR", "24 000 EUR", "26 000 EUR", "28 000 EUR", "30 000 EUR", "32 000 EUR", "34 000 EUR", "36 000 EUR", "38 000 EUR", "40 000 EUR", "50 000 EUR", "60 000 EUR", "70 000 EUR", "80 000 EUR", "90 000 EUR", "100 000 EUR", "150 000 EUR", "200 000 EUR"]), prompt: "--de--" %>
  <%= select_tag :price_ending, options_for_select([ "250 EUR", "500 EUR", "1000 EUR", "2000 EUR", "3000 EUR", "4000 EUR", "5000 EUR", "6000 EUR", "7000 EUR", "8000 EUR", "9000 EUR", "10 000 EUR", "12 000 EUR", "14 000 EUR", "16 000 EUR", "18 000 EUR", "20 000 EUR", "22 000 EUR", "24 000 EUR", "26 000 EUR", "28 000 EUR", "30 000 EUR", "32 000 EUR", "34 000 EUR", "36 000 EUR", "38 000 EUR", "40 000 EUR", "50 000 EUR", "60 000 EUR", "70 000 EUR", "80 000 EUR", "90 000 EUR", "100 000 EUR", "150 000 EUR", "200 000 EUR"]), prompt: "--até--" %>

  <span>Ano</span>
  <%= select_tag :year_start, options_for_select(["1 990", "1 980", "1 970", "1 960", "1 950", "1 940", "1 930", "1 920", "1 910", "1 900"]), prompt: "--de--" %>
  <%= select_tag :year_start, options_for_select(["1 990", "1 980", "1 970", "1 960", "1 950", "1 940", "1 930", "1 920", "1 910", "1 900"]), prompt: "--até--" %>

  <span>Quilómetros</span>
  <%= select_tag :kms_start, options_for_select([ "5 000 km", "10 000 km", "15 000 km", "20 000 km", "25 000 km", "30 000 km", "35 000 km", "50 000 km", "75 000 km", "100 000 km", "125 000 km", "150 000 km", "200 000 km", "250 000 km", "300 000 km", "350 000 km", "400 000 km", "450 000 km", "500 000 km"]), prompt: "--de--" %>
  <%= select_tag :kms_end, options_for_select([ "5 000 km", "10 000 km", "15 000 km", "20 000 km", "25 000 km", "30 000 km", "35 000 km", "50 000 km", "75 000 km", "100 000 km", "125 000 km", "150 000 km", "200 000 km", "250 000 km", "300 000 km", "350 000 km", "400 000 km", "450 000 km", "500 000 km"]), prompt: "--até--" %>

  <%= submit_tag "Pesquisar" %>
</strong></h4>
  

感谢您的帮助。提前谢谢!

1 个答案:

答案 0 :(得分:1)

我认为您只是在寻找增强型android:layout_width="wrap_content" android:layout_height="wrap_content"

https://select2.org应该有效,特别是标记选项:

https://select2.org/tagging

如果您想使用gem进行集成,请使用:https://github.com/argerim/select2-rails