的Javascript Twitter的typeahead.js毀了我的窗體的佈局

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（使用引導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 --> 

我不確定腳本爲什麼會搞亂我的表單佈局。

Answer 1

經過一番研究，看起來這是一個已知的問題，引導3：https://github.com/twitter/typeahead.js/issues/378

人們已經進行了一些修正它，但該修補程序是沒有完全普及，你必須調整的性質讓自己真正地讓它正常工作。我要從頭開始使用該修復程序是這樣的：http://jsfiddle.net/ragulka/Dy9au/1/

.twitter-typeahead { 
    width: 100%; 
    position: relative; 
} 
.twitter-typeahead .tt-query, 
.twitter-typeahead .tt-hint { 
    margin: 0; 
    width: 100%; 
    color: #555555; 
    vertical-align: middle; 
    background-color: #ffffff; 
    border: 1px solid #cccccc; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 
} 
.has-warning .twitter-typeahead .tt-query, 
.has-warning .twitter-typeahead .tt-hint { 
    border-color: #c09853; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
} 
.has-error .twitter-typeahead .tt-query, 
.has-error .twitter-typeahead .tt-hint { 
    border-color: #b94a48; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
} 
.has-success .twitter-typeahead .tt-query, 
.has-success .twitter-typeahead .tt-hint { 
    border-color: #468847; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
} 
.twitter-typeahead .tt-query:focus, 
.twitter-typeahead .tt-hint:focus { 
    border-color: #66afe9; 
    outline: 0; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 
} 
.has-warning .twitter-typeahead .tt-query:focus, 
.has-warning .twitter-typeahead .tt-hint:focus { 
    border-color: #a47e3c; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; 
} 
.has-error .twitter-typeahead .tt-query:focus, 
.has-error .twitter-typeahead .tt-hint:focus { 
    border-color: #953b39; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; 
} 
.has-success .twitter-typeahead .tt-query:focus, 
.has-success .twitter-typeahead .tt-hint:focus { 
    border-color: #356635; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; 
} 
.twitter-typeahead .tt-hint { 
    color: #a1a1a1; 
    z-index: 1; 
    border: 1px solid transparent; 
} 
.twitter-typeahead .tt-query { 
    z-index: 2; 
} 
.twitter-typeahead .tt-query, 
.twitter-typeahead .tt-hint { 
    height: 34px; 
    padding: 6px 12px; 
    font-size: 14px; 
    line-height: 1.428571429; 
} 
.twitter-typeahead .input-sm.tt-query, 
.twitter-typeahead .hint-sm.tt-hint { 
    border-radius: 3px; 
} 
.twitter-typeahead .input-lg.tt-query, 
.twitter-typeahead .hint-lg.tt-hint { 
    border-radius: 6px; 
} 
.input-group .twitter-typeahead:first-child .tt-query, 
.input-group .twitter-typeahead:first-child .tt-hint { 
    border-radius: 4px 0 0 4px !important; 
} 
.input-group .twitter-typeahead:last-child .tt-query, 
.input-group .twitter-typeahead:last-child .tt-hint { 
    border-radius: 0 4px 4px 0 !important; 
} 
.input-group.input-group-sm .twitter-typeahead:first-child .tt-query, 
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint { 
    border-radius: 3px 0 0 3px !important; 
} 
.input-group.input-group-sm .twitter-typeahead:last-child .tt-query, 
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint { 
    border-radius: 0 3px 3px 0 !important; 
} 
.input-sm.tt-query, 
.hint-sm.tt-hint, 
.input-group.input-group-sm .tt-query, 
.input-group.input-group-sm .tt-hint { 
    height: 30px; 
    padding: 5px 10px; 
    font-size: 12px; 
    line-height: 1.5; 
} 
.input-group.input-group-lg .twitter-typeahead:first-child .tt-query, 
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint { 
    border-radius: 6px 0 0 6px !important; 
} 
.input-group.input-group-lg .twitter-typeahead:last-child .tt-query, 
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint { 
    border-radius: 0 6px 6px 0 !important; 
} 
.input-lg.tt-query, 
.hint-lg.tt-hint, 
.input-group.input-group-lg .tt-query, 
.input-group.input-group-lg .tt-hint { 
    height: 45px; 
    padding: 10px 16px; 
    font-size: 18px; 
    line-height: 1.33; 
} 
.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; 
}