how to use Best In Place with twitter bootstrap

Question

I haven't seen any documentation from this..

If I have

<%= best_in_place @user, :city,  type=> :input, %>

I need to include the data-provide="typeahead"

<%= best_in_place @user, :city, type=> :input,:data => {:provide => "typeahead"} %>

and to include the source

<%= best_in_place @user, :city, :type=> :input, :data => {:provide => "typeahead", :source => City.getcities.to_json} %>

assume City.getcities.to_json returns a proper json list with city names

This doesn't work...

Answer 1

With the :data option you can set the data- attibutes on the generated span and not on the input itself.

If you want to add attributes on the generated input element you need to use the :html_attrs options:

<%= best_in_place @user, :city, :type=> :input, 
    :html_attrs => {:'data-provide' => "typeahead", 
                    :'data-source' => City.getcities.to_json} %>

However - as @Nick Ginanto pointed out - the typeahead selection only works with using the keyboard and not with the mouse (maybe because of a bug in bootstrap or because there is no official support in best in place for bootstrap)

But the following code snippet seems to solve this issue:

$('ul.typeahead').live('mousedown', function(e) { e.preventDefault(); });