2016-07-22 6 views
0

Twitterの先読みで奇妙な行動を取っています。 3文字が入力された後、データを正しく取得してドロップダウンリストを表示しますが、フィールドをオートコンプリートしたり、項目をハイライト/選択したりすることはありません。私は何を間違えたのですか?twitter-typeaheadはオートコンプリートや選択をしていません

screenshot

は、私は、次のJavaScriptを持っている(関連するすべてのjQueryと先行入力のものの後):Webページ

<form> 
    <div class="form-group"> 
     <label>Customer</label> 
     <input id="customer" type="text" value="" class="form-control" /> 
    </div> 
    <div class="form-group"> 
     <label>Movie</label> 
     <input id="movie" type="text" value="" class="form-control" /> 
    </div> 
    <button class="btn btn-primary">Submit</button> 
</form> 

とCSSの

$(function() 
{ 

    var customers = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     remote: { 
      url: '/api/customers?query=%QUERY', 
      wildcard: '%QUERY' 
     } 
    }); 

    $('#customer').typeahead 
    (
     { 
      minLength: 3, 
      highlight: true 
     }, 
     { 
      name: 'customers', 
      display: 'name', 
      source: customers 
     } 
    ); 


}); 

関連部分:

.typeahead { 
    background-color: #fff; 
} 

.typeahead:focus { 
    border: 2px solid #0097cf; 
} 

.tt-query { 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
} 

.tt-hint { 
    color: #999 
} 

.tt-menu { 
    width: 422px; 
    margin: 12px 0; 
    padding: 8px 0; 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
      border-radius: 8px; 
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); 
      box-shadow: 0 5px 10px rgba(0,0,0,.2); 
} 

.tt-suggestion { 
    padding: 3px 20px; 
    font-size: 18px; 
    line-height: 24px; 
} 

.tt-suggestion:hover { 
    cursor: pointer; 
    color: #fff; 
    background-color: #0097cf; 
} 

.tt-suggestion.tt-cursor { 
    color: #fff; 
    background-color: #0097cf; 

} 

.tt-suggestion p { 
    margin: 0; 
} 

のようにして、レンダリング取得するようだ:それは私のことが判明し

答えて

0

...それは

autocomplete="off" 

が、それが解決しない変更を言うように、面白いですどの

<input id="customer" type="text" value="" class="form-control tt-input" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;"> 

コントローラは私が期待していたIEnumerable<Customer>ではなく、IHttpActionResultを返していました。私はそれが問題であったと知っていませんが、今は私がそれを修正したので、それは動作します..

関連する問題