Ruby on Rails - 将文本字段与选择结合？(Ruby on Rails - Combine Text Field with Select?)

 我想要一个文本字段，当用户按下它时，会出现一些可能的选项，如带选项（或datalist）的下拉菜单。 像这样的东西： 
 
  
 
 有没有任何宝石或图书馆可以为我做这件事？ 还是有一个很好的例子，如何正确地做到这一点？ 我尝试过搜索，但也许我没有提出正确的问题，因为我找不到太多东西...... 
 
 编辑： 
 
 关于我的项目： 
 
 我正在做一个汽车网站，所以我需要按价格，年份，公里等过滤汽车......这就是为什么我需要一个用户可以放置的文本字段，例如，他们的价格范围，但同时我想要显示一些他们可以选择的选项。 这些选项是静态的，它们不是来自任何模型。 
 
 然后，我将使用：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>
 
 我会感谢你的帮助。 提前致谢！ 

I want a text field that when the user presses it, appears some possible options, like a dropdown with options (or datalist). Something like this:
 
 
Is there any gem or library that can do this for me? Or is there a good example how to do this properly? I've tried to seach but maybe I'm not making the right question beacause I can't find much stuff...
 
EDIT:
 
About my project:
 
I'm doing a car website, so I need to filter the cars by price, year, kilometers, etc...That's why I need a text field that users can put, for example, their price range but as the same time I want to show some options that they can select too. These options are static, they dont came from any model. 
 
I will then use the :price_start and :price_ending to do a named_scope to filter the data. 
 
Here is my model:
 
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
 
My index:
 
<%= 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>
 
I will appreciate your help. Thanks in advance!

原文：https://stackoverflow.com/questions/50645095