Rails 5 объединяет выпадающий список с текстовым полем

Question

У меня есть модель с именем Цвет с именем для ее столбца.У меня есть другая модель с именем Car , в которой make , model и color_id для ее столбца.

При созданииновый Автомобиль , я хотел бы, чтобы в раскрывающемся списке были перечислены все цвета, а внизу есть опция «Другое».Как сделать так, чтобы текстовое поле отображалось, если пользователь выбирает параметр «Другое», чтобы пользователь мог ввести новый цвет?

Кроме того, если пользователь выбрал «Другое» и ввел ввод «Желтый», какввести новые данные Color ?

Answer 1

Хороший способ сделать это с помощью datalists

<datalist id='colors'>
  <% Color.all.each do |color| %>
    <option><%= color.name %></option>
  <% end %>
</datalist>

<input class='form-control' list='colors' id='car_color_name' name='car[color_name]' value='<%=@car.color.name%>'>

. Это дает вам выпадающее поле ввода, где вы можете выбрать любой существующий цвет, введя начальные буквы, или вы можете ввестиСовершенно новый цвет в том же поле ввода.

В вашем методе создания и обновления в cars_controller вы можете сделать ...

@car.color = Color.find_or_create_by(name: params[:car][:color_name])

Не требуется JavaScript!

Answer 2

Вы можете сделать это с помощью простого JQuery.

В вашем Controller:

class CarsController < ApplicationController
  def new # it is up to you if you used another function
     @colors = Color.all.map{|c| [c.name, c.id]}
     @colors += [['Other', -1]] # as there is no negative ID
  end
end

В вашем представлении:

# views/cars/new.html.erb
# the following line to the input 
select_tag :color, options_for_select(@colors) #check documentation of select tag for more usability (like default option...)

Все, что у вас естьсделать сейчас - добавить текстовое поле ввода с отключенным свойством, дать этому текстовому полю id, например, id="otherColor", отключить его с помощью JQuery или JavaScript и создать новый actionListner для change для выбора (предоставивselect_tag дополнительный параметр с именем 'id', вам будет разрешено это сделать), затем проверьте, не использовал ли он другой параметр, чтобы он позволял вводить данные.

Не беспокойтесь, если он выберет другой параметр, кроме 'чужие, отключенные входы не отправляются с запросом, поэтому в вашем контроллере вы должны проверить, послал ли он вам params['otherColor'], если это так, создать новый цвет и прикрепить его к автомобилю, иначе прикрепить выбранный цвет извыпадающий список к машине, надеюсь, это поможет.