使用来自Twitter Bootstrap的Typeahead表格(formtastic)

如何从bootstrap集成一个typeahead,如下所示:

 

进入这样的标准forms:

   

在你的控制器中

 def index @autocomplete_items = Model.all end 

在您的视图中,就像您拥有选择器的附加ID一样……

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

最重要的是,将控制器中定义的@autocomplete_items实例变量传递到视图中的Javascript变量:

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

这将序列化您的数据并使其可用于Typeahead函数的JSON。

对于Typeahead,只需将该对象( @autocomplete_items )作为JSON传递给Javascript,如下所示:

  

此外,还有一个用于Rails 3的Autocomplete gem,它可以直接与您的模型一起使用,而不是将对象传递给您的Javascript。 文档中甚至还有一个Formtastic示例。

编辑:看起来我没有看完你的整个问题! 不幸的是,目前不支持Formtastic的HTML5数据属性。 然而,有一个单独的分支确实包括对这些属性的支持。

除此之外,总是只是坚持使用Good ol’HTML / ERB来实现这样的动态function……

  

编辑2:我刚注意到两件事。 首先是我将JSON对象传递给Javascript变量的方式(参见示例)。 其次,上面使用HTML5数据属性的示例不适用于Twitter的Typeahead插件,但它可以与jQuery UI Autocomplete插件一起使用。

我得到它的工作方式如下:

调节器

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

和意见