otomatik tamamlama, neden css stilleri eksik

Question

emin değilim, ama benim typeahead.js uzaktan otomatik tamamlama çalışmayı durdurdu. Typeahead.js ile ilgili herhangi bir kod değiştirmedim, ancak bozuk olduğu için yanlış olmalıyım. site here'a bir göz atabilir misin? Ben jsfiddle yaratırdım, ama Cross-Origin Request Blocked sayesinde benim bağımlılıklarımı ekleyemedim.
Sorun:
Ben "JN" veya "AAP" yazarsanız bu ben (öneriler düz metin olarak) elde ediyoruz:
Ayrıca Ben otomatik tamamlama üçüncü karakter girişi sonrasında başlar neden değil bilmek istiyorum önce (minLength: 1 kullanıyorum).
Kodumun çoğunu burada yapıştıracağım çünkü muhtemelen sitemi gelecekte değiştireceğim.
İthalat:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
    <link rel="stylesheet" type="text/css" href="/static/css/typeahead.css"> 

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script> 
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="//twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script> 

JAVASCRİP:

<script type="text/javascript"> 
     $(function(){ 
      var stocks = new Bloodhound({ 
       datumTokenizer: function (datum) { 
        return Bloodhound.tokenizers.whitespace(datum.tokens); 
       }, 
       queryTokenizer: Bloodhound.tokenizers.whitespace, 
       limit: 5, 
       remote: { 
        url: "/search/autocomplete/", 
        replace: function(url, query) { 
         return url + "?q=" + query; 
        }, 
        filter: function(stocks) { 
         return $.map(stocks, function(data) { 
          return { 
           tokens: data.tokens, 
           symbol: data.symbol, 
           name: data.name 
          } 
         }); 
        } 
       } 
      }); 
      stocks.initialize(); 
      $('.typeahead').typeahead(null, { 
        name: 'stocks', 
        displayKey: 'name', 
        minLength: 1, // send AJAX request only after user type in at least X characters 
        source: stocks.ttAdapter(), 
        templates: { 
         suggestion: function(data){ 
          return '<p>' + data.name + ' (<strong>' + data.symbol + '</strong>)</p>'; 
         } 
        } 
      }).on('typeahead:selected', function (obj, stock) { 
       window.location.href = "/stocks/detail/" + stock.symbol; 
      }); 
     }); 
    </script> 

formu:

 <div class="col-sm-3 col-xs-12 col-lg-3 navbar-right"> 
      <form method="get" action="/search/" role="search"> 
       <div class="input-group input-sm"> 
       <input type="text" class="form-control typeahead" 
         placeholder="Stock symbol" autocomplete="off" id="id_q" name="q"> 
        <div class="input-group-btn"> 
         <button class="btn btn-info" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
        </div> 
       </div> 
      </form> 
     </div> 

Ve bu benim typeahead.css geçerli:

/* 
* typehead.js-bootstrap3.less 
* @version 0.2.3 
* https://github.com/hyspace/typeahead.js-bootstrap3.less 
* 
* Licensed under the MIT license: 
* http://www.opensource.org/licenses/MIT 
*/ 
.has-warning .twitter-typeahead .tt-input, 
.has-warning .twitter-typeahead .tt-hint { 
    border-color: #8a6d3b; 
    -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-warning .twitter-typeahead .tt-input:focus, 
.has-warning .twitter-typeahead .tt-hint:focus { 
    border-color: #66512c; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; 
} 
.has-error .twitter-typeahead .tt-input, 
.has-error .twitter-typeahead .tt-hint { 
    border-color: #a94442; 
    -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-input:focus, 
.has-error .twitter-typeahead .tt-hint:focus { 
    border-color: #843534; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; 
} 
.has-success .twitter-typeahead .tt-input, 
.has-success .twitter-typeahead .tt-hint { 
    border-color: #3c763d; 
    -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-input:focus, 
.has-success .twitter-typeahead .tt-hint:focus { 
    border-color: #2b542c; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; 
} 
.input-group .twitter-typeahead:first-child .tt-input, 
.input-group .twitter-typeahead:first-child .tt-hint { 
    border-bottom-left-radius: 4px; 
    border-top-left-radius: 4px; 
} 
.input-group .twitter-typeahead:last-child .tt-input, 
.input-group .twitter-typeahead:last-child .tt-hint { 
    border-bottom-right-radius: 4px; 
    border-top-right-radius: 4px; 
} 
.input-group.input-group-sm .twitter-typeahead .tt-input, 
.input-group.input-group-sm .twitter-typeahead .tt-hint { 
    height: 30px; 
    padding: 5px 10px; 
    font-size: 12px; 
    line-height: 1.5; 
    border-radius: 3px; 
} 
select.input-group.input-group-sm .twitter-typeahead .tt-input, 
select.input-group.input-group-sm .twitter-typeahead .tt-hint { 
    height: 30px; 
    line-height: 30px; 
} 
textarea.input-group.input-group-sm .twitter-typeahead .tt-input, 
textarea.input-group.input-group-sm .twitter-typeahead .tt-hint, 
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input, 
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint { 
    height: auto; 
} 
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, 
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { 
    border-radius: 0; 
} 
.input-group.input-group-sm .twitter-typeahead:first-child .tt-input, 
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint { 
    border-bottom-left-radius: 3px; 
    border-top-left-radius: 3px; 
    border-bottom-right-radius: 0; 
    border-top-right-radius: 0; 
} 
.input-group.input-group-sm .twitter-typeahead:last-child .tt-input, 
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint { 
    border-bottom-left-radius: 0; 
    border-top-left-radius: 0; 
    border-bottom-right-radius: 3px; 
    border-top-right-radius: 3px; 
} 
.input-group.input-group-lg .twitter-typeahead .tt-input, 
.input-group.input-group-lg .twitter-typeahead .tt-hint { 
    height: 46px; 
    padding: 10px 16px; 
    font-size: 18px; 
    line-height: 1.33; 
    border-radius: 6px; 
} 
select.input-group.input-group-lg .twitter-typeahead .tt-input, 
select.input-group.input-group-lg .twitter-typeahead .tt-hint { 
    height: 46px; 
    line-height: 46px; 
} 
textarea.input-group.input-group-lg .twitter-typeahead .tt-input, 
textarea.input-group.input-group-lg .twitter-typeahead .tt-hint, 
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input, 
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint { 
    height: auto; 
} 
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input, 
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint { 
    border-radius: 0; 
} 
.input-group.input-group-lg .twitter-typeahead:first-child .tt-input, 
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint { 
    border-bottom-left-radius: 6px; 
    border-top-left-radius: 6px; 
    border-bottom-right-radius: 0; 
    border-top-right-radius: 0; 
} 
.input-group.input-group-lg .twitter-typeahead:last-child .tt-input, 
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint { 
    border-bottom-left-radius: 0; 
    border-top-left-radius: 0; 
    border-bottom-right-radius: 6px; 
    border-top-right-radius: 6px; 
} 
.twitter-typeahead { 
    width: 100%; 
} 
.input-group .twitter-typeahead { 
    display: table-cell !important; 
    float: left; 
} 
.twitter-typeahead .tt-hint { 
    color: #999999; 
} 
.twitter-typeahead .tt-input { 
    z-index: 2; 
} 
.twitter-typeahead .tt-input[disabled], 
.twitter-typeahead .tt-input[readonly], 
fieldset[disabled] .twitter-typeahead .tt-input { 
    cursor: not-allowed; 
    background-color: #eeeeee !important; 
} 
.tt-dropdown-menu { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 1000; 
    min-width: 160px; 
    width: 100%; 
    padding: 5px 0; 
    margin: 2px 0 0; 
    list-style: none; 
    font-size: 14px; 
    background-color: #ffffff; 
    border: 1px solid #cccccc; 
    border: 1px solid rgba(0, 0, 0, 0.15); 
    border-radius: 4px; 
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 
    background-clip: padding-box; 
    *border-right-width: 2px; 
    *border-bottom-width: 2px; 
} 
.tt-dropdown-menu .tt-suggestion { 
    display: block; 
    padding: 3px 20px; 
    clear: both; 
    font-weight: normal; 
    line-height: 1.42857143; 
    color: #333333; 
    white-space: nowrap; 
} 
.tt-dropdown-menu .tt-suggestion.tt-cursor { 
    text-decoration: none; 
    outline: 0; 
    background-color: #f5f5f5; 
    color: #262626; 
} 
.tt-dropdown-menu .tt-suggestion.tt-cursor a { 
    color: #262626; 
} 
.tt-dropdown-menu .tt-suggestion p { 
    margin: 0; 
} 

Bunu nasıl düzeltebilirim?

Answer 1

Daha yeni bootstrap.min.js veya typeahead.js sürümünü kullandım ve typeahead.css çalışmayı durdurdu. new css file'u kullanmak benim sorunumu giderdi.
Hm, garip bir versiyona benziyor, ancak 4 tane kaldırma ve 18 tane eklenti var.