Typeahead破坏旧的搜索框样式

Question

所以我使用这种预先输入的脚本

http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js

这是我的表格

<div class="container" id="head">
          <div class="col-md-12" align="center" style="padding-top: 1%">
            <h1><%= image_tag("Logo.png", :class => "logo", :style => "background-color: rgba(0, 0, 0, 0.8); border-radius: 50px") %></h1>
            <%= form_tag search_events_path, method: :get do %>
            <%= text_field_tag :search, params[:search], placeholder: "Search Artist, Event, Festival or Sports Team", class: "srchFld", id: "search"%>
            <%= submit_tag "Search", id: "submit", class: "srchBtn" %>
            <% end %>
          </div>
          <script type="text/javascript" charset="utf-8">
            $(function () {
              return $('#search').typeahead({name: "event", remote: "/events_autocomplete?query=%QUERY"});
            });
          </script>
          <!-- <input type="checkbox" name="name" value=""> -->

        </div>

出于某种原因，我发送的表单看起来像这样

我将如何解决这个问题？

非常愿意提供更多代码。

它应该看起来像这样

这是我错过的css

/* ================ */
.tt-dropdown-menu {
  width: 100%;
  min-width: 160px;
  margin-top: 2px;
  padding: 5px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  *border-right-width: 2px;
  *border-bottom-width: 2px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.tt-suggestion {
  display: block;
  padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
  color: #fff;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.tt-suggestion.tt-is-under-cursor a {
  color: #fff;
}
.tt-suggestion p {
  margin: 0;
}

.books-search {
  .twitter-typeahead {
    width: 100%;
  }
  .btn {
    vertical-align: top;
  }
}

我的搜索css就是这个

  form > * {
    vertical-align: middle;
  }

  .srchBtn {
    border: 0;
    border-radius: 7px;
    padding: 0 17px;
    background: #1292fd;
    width: 99px;
    border-bottom: 5px solid #0e7bd6;
    color: #fff;
    height: 65px;
    font-size: 1.5rem;
    cursor: pointer;
  }
  .srchBtn:active {
    border-bottom: 0 solid #c0392b;
  }
  .srchBtn:focus {
    outline: 0;
  }

  .srchFld {
    border: 0;
    border-radius: 7px;
    padding: 0 17px;
    max-width: 404px;
    width: 40%;
    border-bottom: 5px solid #bdc3c7;
    height: 60px;
    color: #7f8c8d;
    font-size: 19px;
  }
  .srchFld:focus {
    outline-color: rgba(255, 255, 255, 0);
  }