javascript - Twitter の typeahead.js を使用した Javascript がフォームのレイアウトを台無しにする

Question

したがって、タイプアヘッドを使用してデータベースからデータを取得するスクリプトがあります。

<script type="text/javascript">
$(document).ready(function() {
  $("#navPersonSearch").typeahead({
    name: 'people',
    remote: 'name_autocomplete/?q=%QUERY'
  })
    .keydown(function(e) {
        if (e.keyCode === 13) {
            $("form").trigger('submit');
        }
    });
});
</script>

これは、スクリプトなしで私のフォームがどのように見えるかです

そして、これはスクリプトでどのように見えるかです:

これはページの html です (bootstrap 3 を使用):

<div class="jumbotron">
  <div class="container">
    <h1 align="center">Search</h1>
    <div class="row">
       <div class="col-lg-12">
             <form id="search_form" align="center" action="/search/" class="form-inline" method ="get" role="form">
           <input id="navPersonSearch" class="input form-control" type="text" name="q"
            placeholder="Search for Actor/Actress"
                 autocomplete="off" >
      </form> 
      </div> <!-- /.col -->
    </div>  <!-- /.row -->
  </div> <!-- /.container -->
</div> <!-- /.jumbotron -->

スクリプトがフォームのレイアウトを台無しにしている理由がわかりません。