Question

如何從引導整合預輸入這樣的：

<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 

在你看來，就像你有一個額外的選擇ID ...

<% 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的事先鍵入的內容功能使用。

至於事先鍵入的內容，僅僅是對象（@autocomplete_items）作爲JSON傳遞給Javascript，像這樣：

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

此外，還有一個Autocomplete gem for Rails 3這將直接與您的模型工作，而不是對象假冒到你的Javascript。文檔中甚至有一個Formtastic示例。

編輯：它看起來像我沒有讀你的整個問題！不幸的是，HTML5數據屬性目前不支持Formtastic。然而，有一個separate branch確實包含對這些屬性的支持。

除此之外，總是有隻是好醇」 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 %>'>