tự động hoàn tất thiếu kiểu css

Question

không chắc chắn lý do, nhưng tính năng tự động hoàn thành từ xa typeahead.js của tôi ngừng hoạt động. Tôi đã không thay đổi bất kỳ mã nào liên quan đến typeahead.js, nhưng vì nó bị hỏng, tôi phải sai. Bạn có thể vui lòng xem site here của tôi không? Tôi sẽ tạo ra jsfiddle, nhưng nhờ có Cross-Origin Request Blocked Tôi không thể bao gồm sự phụ thuộc của mình.
Vấn đề:
Nếu tôi gõ "JN" hoặc "AAP" đây là những gì tôi nhận được (gợi ý là trong văn bản đơn giản):
Ngoài ra tôi muốn biết tại sao autocomplete bắt đầu sau khi đầu vào nhân vật thứ ba, không đầu tiên (tôi sử dụng minLength: 1).
Tôi sẽ dán hầu hết mã của mình ở đây, vì tôi có thể sẽ thay đổi trang web của mình trong tương lai.
Imports:

<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> 

Javascrip:

<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> 

dạng:

 <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> 

Và đây là typeahead.css tôi:

/* 
* 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; 
} 

Làm cách nào để khắc phục sự cố này?

Answer 1

Tôi đã sử dụng phiên bản mới hơn của bootstrap.min.js hoặc typeahead.js và typeahead.css của tôi ngừng hoạt động. Sử dụng new css file đã khắc phục được sự cố của tôi.
Hm, nó kỳ lạ nó nói nó cùng một phiên bản, nhưng có 4 loại bỏ và 18 bổ sung.