Question

使用Rails 5 w /＆amp; Bootstrap 3和gem 'twitter-typeahead-rails', '~> 0.11.1'：

我得到了一些奇怪的行为......当我加载root_path页面时，预输入输入字段旁边会显示预先输入字段（如下所示）：

root path search field displays in duplicate

但是当我转到另一个页面（例如，root_path / settings）时，该字段显示并且行为正常（如下所示）：

all other paths display the navbar search field correctly

这是form_tag代码（来自Bootstrap导航）：

      <div class="navbar-form navbar-left" >
        <%= form_tag searches_path, id: 'searchMain', method: :get do %>
          <%= text_field_tag :query, params[:query], placeholder: 'search', class: 'form-control typeahead' %>
            <span class="glyphicon glyphicon-search form-control-feedback"></span>
           <%= submit_tag 'Search', style: 'display:none' %>
        <% end %>
      </div>

这可能是由Turbolinks引起的吗？

Answer 1

解决方案实际上非常简单：我在错误的位置使用相应的typeahead脚本的id标记。它应该在text_field_tag。

中

Bootstrap Nav的正确代码应为：

      <%= form_tag searches_path, method: :get do %>
        <%= text_field_tag :query, params[:query], id: 'searchMain', placeholder: 'search', class: 'form-control typeahead' %>
          <span class="glyphicon glyphicon-search form-control-feedback"></span>
        <%= submit_tag 'Search', style: 'display:none' %>
      <% end %>

这引用了以下脚本：

$('#searchMain').typeahead({
  highlight: true,
},
{
  displayKey: 'name',
  source: events.ttAdapter(),
  templates: {
    header: '<h3 class="search-header">Events</h3>'
  },
});

Rails中的Typeahead：Bootstrap导航栏中的重复搜索字段

1 个答案: