在表单中使用 Twitter Bootstrap 中的 Typeahead (formtastic) [英] Using Typeahead from Twitter Bootstrap in a form (formtastic)

问题描述

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

变成这样的标准形式:

<%= semantic_form_for(@education) do |f|％＞<%=render 'shared/error_messages', object: f.object %><div class="field"><%= f.input :college, placeholder: "Update Education" %>

<%= f.submit "Submit", class: "btn btn-large btn-primary" %><%结束%>

解决方案

在你的控制器中

def 索引@autocomplete_items = Model.all结尾

在您看来，就像您为选择器添加了一个附加 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" %>

<%= f.submit "Submit", class: "btn btn-large btn-primary" %><%结束%>

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

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

这将序列化您的数据并使其成为可供 Typeahead 函数使用的 JSON.

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

此外，还有一个 Rails 3 的自动完成 gem，它将直接与您的模型一起工作，而不是传递反对您的 Javascript.文档中甚至还有一个 Formtastic 示例.

看起来我没有阅读你的整个问题！不幸的是，Formtastic 目前不支持 HTML5 数据属性.然而，有一个单独的分支确实包含对这些属性的支持.

除此之外，对于像这样的动态功能，总是坚持使用 Good ol' HTML/ERB...

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

How do I integrate a typeahead from bootstrap like this:

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

解决方案

In your controller

def index
  @autocomplete_items = Model.all
end

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

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

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

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

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

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.

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

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

这篇关于在表单中使用 Twitter Bootstrap 中的 Typeahead (formtastic)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！