Question

我找到了这个Bootstrap Select项目及其gem for Rails。我想在select标签中实现搜索。

我检查元素，这里是HTML源代码：

<select class="selectpicker" data-live-search="true">
  <option>Hot Dog, Fries and a Soda</option>
  <option>Burger, Shake and a Smile</option>
  <option>Sugar, Spice and all things nice</option>
</select>

如何在表单选择标记中添加data-live-search="true"？

我的表单选择：

<%= f.select :food_id, options_for_select(Food.all.map{|c| [c.name, c.id]}, f.object.food_id), {}, {class: "form-control selectpicker"} %>

我尝试了什么：

<%= f.select :food_id, options_for_select(Food.all.map{|c| [c.name, c.id]}, f.object.food_id), {}, {class: "form-control selectpicker", data: "live-search"} %>

但它不起作用。

Answer 1

尝试：

{class: "form-control selectpicker", "data-live-search" => "true" }

Answer 2

<%= f.select :food_id, options_for_select(Food.all.map{|c| [c.name, c.id]}, f.object.food_id), {}, {class: "form-control selectpicker", data: {"live-search": true}} %>

Answer 3

  <%= f.select(:plan_id, {},{}, {'v-model'=>"plan_id",'@change'=>"onChange", class: "form-control"}) do  %>
<% Plan.all.each do |plan| %>
    <%= content_tag(:option,"#{plan.name.upcase} #{plan.max_items}  #{number_to_currency(plan.price)}", value:plan.id, :data => {items: plan.max_items, price: plan.price}) %>
<% end%>
<% end%>

Answer 4

如果您要将一个块传递给选择项，则需要两次传递{}，例如

    => f.select :to_user_id, {}, {}, data: { placeholder: "Choisis des invités..." }, class: "chosen-image" do
      - User.find_each do |user|
        option(data-img-src="#{user_image_url_for(user)}" value="#{user.id}")
          = user.first_name

如何在Rails表单中添加数据属性选择标签？

4 个答案: