Использование Typeahead из Twitter Bootstrap в форме (formtastic)

Question

Как мне интегрировать typeahead из начальной загрузки так:

<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="8" data-source='["University of Pennsylvania","Harvard","Yale","Princeton","Cornell","Brown","Columbia","Dartmouth"]'>

в стандартную форму, как это:

<%= semantic_form_for(@education) do |f| %>
 <%= render 'shared/error_messages', object: f.object %>
<div class="field">
 <%= f.input :college, placeholder: "Update Education" %>
</div>
<%= f.submit "Submit", class: "btn btn-large btn-primary" %>
<% end %> 

Answer 1

В вашем контроллере

def index
  @autocomplete_items = Model.all
end

На ваш взгляд, как и у вас с дополнительным идентификатором для селектора ...

<% semantic_form_for(@education) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <div class="field">
    <%= f.input :college, placeholder: "Update Education", id: "auto_complete" %>
  </div>
  <%= f.submit "Submit", class: "btn btn-large btn-primary" %>
<% end %> 

И самое главное, передайте переменную экземпляра @autocomplete_items, определенную в вашем контроллере, в переменную Javascript в вашем представлении:

<%= javascript_tag "var autocomplete_items = #{ @autocomplete_items.to_json };" %>

Это позволит сериализовать ваши данные и сделать его пригодным для использования JSON для использования функцией Typeahead.

Что касается Typeahead, просто передайте этот объект (@autocomplete_items) как JSON Javascript следующим образом:

<script type="text/javascript">
    jQuery(document).ready(function() {
        $('#auto_complete').typeahead({source: autocomplete_items});
    });
</script>

Кроме того, есть самоцвет автозаполнения для Rails 3 , который будет работать напрямую с вашими моделями, а не передавать объект в ваш Javascript. В документации есть даже пример Formtastic.

Редактировать: Похоже, я не прочитал весь ваш вопрос! К сожалению, атрибуты данных HTML5 в настоящее время не поддерживаются в Formtastic. Однако существует отдельная ветвь , которая включает поддержку этих атрибутов.

Кроме этого, всегда есть возможность использовать Good ol 'HTML / ERB для таких динамических функций, как эта ...

<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="8" data-source='<%= @autocomplete_items.to_json %>'>

РЕДАКТИРОВАТЬ 2: Я только что заметил две вещи. Сначала я передавал объект JSON в переменную Javascript (см. Пример). Во-вторых, приведенный выше пример с использованием атрибутов данных HTML5 не будет работать с плагином Twitter Typeahead, но он будет работать с плагином jQuery UI Autocomplete .

Answer 2

у меня получилось так:

Контроллер

 @categories = Category.find(:all,:select=>'name').map(&:name)

и просмотров

<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="8" data-source='<%= @categories.to_json %>'>