How to add data attribute in Rails form select tag?

Question

I found this Bootstrap Select project and its gem for Rails. I want to implement search in the select tag.

I do inspect element and here is the HTML source:

<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>

How do I add data-live-search="true" inside my form select tag?

My form select:

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

What I've tried:

<%= 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"} %>

But it's not working.

Solution 1

Try:

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

Solution 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}} %>

Solution 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%>

Comments

[Philidor]

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

[Nick Veys]

Or, data: { 'live-search' => 'true' }.

[Zulhilmi Zainudin]

{class: "form-control selectpicker", "data-live-search" => "true"} working. But the search part is not working now. Weird.

[Philidor]

What is search part?

[Zulhilmi Zainudin]

Now I have this: <select class="form-control selectpicker" data-live-search="true" name="order[foods_orders_attributes][0][food_id]" id="order_foods_orders_attributes_0_food_id"><option selected="selected" value="7">Nasi Ayam</option> <option value="9">Kebab</option></select> But it's not working.

[Philidor]

What is exactly not working?

[Zulhilmi Zainudin]

I have this helper: gist.github.com/anonymous/f0d0666b9ef543ec1ffa. The search functionality only works on saved record. But when I try to add a new record, it's not working. See this - i.imgur.com/h6NAE9O.gif // Both saved & new select tag have the data-live-search="true".

[Philidor]

i assume you should reinitialize your js, because it's new element and selectpicker not initialized for it.

[Philidor]

try it out in browser console after append first input as like in your screen i.imgur.com/h6NAE9O.gif, run in browser console $('.selectpicker').selectpicker(); and check again, let me know if it works.

[Zulhilmi Zainudin]

It works. Ok, what should I do now?

[Philidor]

Let us continue this discussion in chat.

[gshilin]

I vote up, because it is full answer with correct example, not just some partial code

[Aboozar Rajabi]

Thanks a lot. After one day searching, it solves my problem! ;)