使用来自Twitter Bootstrap的Typeahead表格（formtastic）

How do I integrate a typeahead from bootstrap like this:

如何从bootstrap集成一个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"]'>

into a standard form like this:

进入这样的标准形式:

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

2 个解决方案

#1

In your controller

在你的控制器中

def index
  @autocomplete_items = Model.all
end

In your view, just like you have with an additional ID for the selector...

在您的视图中,就像您拥有选择器的附加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 %>

And most importantly, pass the @autocomplete_items instance variable defined in your controller into a Javascript variable in your view:

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

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

This will serialize your data and make it usable JSON for the Typeahead function to use.

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

As for the Typeahead, simply pass that object (@autocomplete_items) as JSON to the Javascript like so:

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

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

Additionally there is an Autocomplete gem for Rails 3 which will work directly with your models rather than passing off the object to your Javascript. There is even a Formtastic example in the documentation.

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

Edit: It looks like I didn't read your whole question! Unfortunately HTML5 Data Attributes are currently unsupported with Formtastic. There is however a separate branch that does include support for these attributes.

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

Other than that there's always just sticking with Good ol' HTML/ERB for dynamic features like this...

除此之外,总是只是坚持使用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 %>'>

EDIT 2: I've just noticed two things. First being the way I was passing the JSON object to a Javascript variable (see the example). Secondly, the above example using HTML5 data attributes will not work with Twitter's Typeahead plugin, but it will work with the jQuery UI Autocomplete plugin.

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

#2

I got it worked like:

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

Controller

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

and views

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

#1