ruby-on-rails – 使用来自Twitter Bootstrap的Typeahead形式(fo

发布时间：2020-12-16 23:01:49 所属栏目：百科来源：网络整理

导读：如何从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

如何从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"]'>

成为这样的标准形式：

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

解决方法

在你的控制器中

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 };" %>

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

对于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插件一起使用.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!