1. 首頁
  2. 問答
  3. 自動完成缺少CSS樣式

自動完成缺少CSS樣式

2015-07-11 56 views
5

不知道爲什麼，但我的typeahead.js遠程自動完成停止工作。我沒有更改關於typeahead.js的任何代碼，但是因爲它被破壞了，我一定是錯的。你能看看我的site here嗎？我會創建jsfiddle，但是要感謝Cross-Origin Request Blocked我不能包含我的依賴關係。
問題：
如果鍵入「JN」或「AAP」這是我得到了（建議是純文本）：
typeahead.js autocomplete without css 此外，我想知道爲什麼自動完成第三個字符輸入後開始，不第一（我使用minLength: 1）。
我會在這裏粘貼大部分代碼，因爲我將來可能會更改我的網站。
進口：自動完成缺少CSS樣式

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

形式：

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

這是我typeahead.css：

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

我該如何解決這個問題？

來源

2015-07-11 Lucas03

回答

12

我使用了較新版本的bootstrap.min.js或typeahead.js，並且我的typeahead.css停止了工作。使用new css file解決了我的問題。嗯，它的奇怪說它是相同的版本，但有4個刪除和18個添加。

來源

2015-07-14 18:15:49 Lucas03

+0

謝謝你！這對我有效。 –

相關問題

 相關問題