在表单中使用来自 Twitter Bootstrap 的 Typeahead (formtastic)答案

【问题标题】：Using Typeahead from Twitter Bootstrap in a form (formtastic)在表单中使用来自 Twitter Bootstrap 的 Typeahead (formtastic)
【发布时间】：2012-03-20 20:21:58
【问题描述】：

我如何像这样从引导程序集成预输入：

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

【问题讨论】：

我没有阅读你的整个问题！我已经相应地更新了我的答案。

标签： ruby-on-rails ruby ruby-on-rails-3 twitter-bootstrap

【解决方案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 以供 Typeahead 函数使用。

至于 Typeahead，只需将该对象 (@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 示例。

编辑：看来我没有阅读您的整个问题！不幸的是，Formtastic 目前不支持 HTML5 数据属性。然而，有一个 separate branch 确实包含对这些属性的支持。

除此之外，对于像这样的动态功能，总是坚持使用 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 插件。

【讨论】：

也许是因为我对此有点陌生，但我似乎无法让您编写的方法或 Autocomplete gem 工作.. 至于您的方法，我该放在哪里那个javascript？我制作了一个名为 University 的模型，其中只有大学名称，我制作了一个名为 university_controller 的控制器并将索引方法放入其中。尽管如此，预输入仍然不起作用。请帮忙？
您遇到的错误是什么？是 Ruby 代码还是 Javascript 的问题？
我刚刚注意到将 JSON 传递到 Javascript 代码的方式会产生问题。我已经通过使用 javascript_tag 帮助程序来解决这个问题，并使用 ERB 传递了变量。

【解决方案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 %>'>

【讨论】：

代替@categories = Category.find(:all,:select=>'name').map(&:name)你也可以使用更短的@categories = Category.uniq.pluck(:name)。
这适用于较小的数据集，但如果它们变大，处理所有记录所需的时间会阻止预输入快速工作。对于大型数据集，您需要使用查询而不是返回块中的所有 json。
我同意对于低数据集，这会很快。对于大型集合，使用 ajax 将是更好的选择。有多个 typeahead ajax 示例。
请注意，我相信 Rails 3.2 及之后版本，Category.pluck(:name) 而不是 Category.find(:all,:select=>'name').map(&:name ) 将更快、更高效。