Twitter.Typeaheadはasp.net mvcのbootsrap 3.00で動作しません5

Question

親愛なるTwitter.Typeaheadバージョン0.11.1をインストールしました。それは動作していません。ここに私のコードは

<div class="form-group" style="display:none" id="serialNumber"> 
              <div class="tt-container"> 
               <label>Serial Number</label> 
               <input class="typeahead form-control" id="SerialNumber" name="SerialNumber" type="text" value="" placeholder="Enter Serial Number Here.." /> 
              </div>                   
             </div> 
             <ul id="lstSerials" class="list-group"></ul> 

そして、ベローズである私のスクリプトここ

var sno = []; 
     var serials = new Bloodhound({ 
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'), 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 
      remote: { 
       url: '/Sales/GetSerialNo?query=%QUERY', 
       wildcard: '%QUERY' 
      } 
     }); 

     $('#SerialNumber').typeahead({ 
      minLength: 3, 
      highlight: true, 
      hint: true 
     }, { 
      name: 'serials', 
      display: 'serialNumbers', 
      source: serials 
     }).on("typeahead:select", function (e, data) { 
      $("#lstSerials").append("<li class='list-group-item'>" + data + "</li>"); 
      $("#SerialNumber").typeahead("val", ""); 
      sno.push(data); 
     }); 

は、最後にここに先行入力

.twitter-typeahead .tt-query, .twitter-typeahead .tt-hint { 
    margin-bottom: 0; } 

.tt-hint { 
    display: block; 
    width: 100%; 
    height: 38px; 
    padding: 8px 12px; 
    font-size: 14px; 
    line-height: 1.428571429; 
    color: #999; 
    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; } 

.tt-menu { 
    min-width: 160px; 
    margin-top: 2px; 
    padding: 5px; 
    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; } 

.tt-suggestion { 
    display: block; 
    padding: 3px 20px; 
    width: 100%; } 

.tt-suggestion.tt-selectable { 
    margin: 5px 0px 5px 0px; } 

.tt-suggestion.tt-cursor { 
    color: #fff; 
    background-color: #428bca; } 

.tt-suggestion.tt-cursor a { 
    color: #fff; } 

.tt-suggestion p { 
    margin: 0; } 

スタイリングされているテストの目的のために、私は、静的なデータを持って、コントローラである

public JsonResult GetSerialNo(string query) 
     { 
      List<string> lstTest = new List<string>(); 
      lstTest.Add("aaaHafiz"); 
      lstTest.Add("aaaSiddiq"); 
      lstTest.Add("aaaUmer"); 
      return Json(new { serialNumbers = lstTest }, JsonRequestBehavior.AllowGet); 
     } 

しかし、私は3つの言葉を書いた後にアプリケーションを実行すると、私はなぜ見えないのかわからない唯一の値を取得します。検査でもエラーは表示されません。 サンプル出力エラーは、これらの写真に示されている：

• When I type the keywords in the textbox
• I get only one suggestion instead of three and also when i look at this how bad is this having look and feel

Answer 1

最後に私は私のコードのjavascriptの一部を最適化することにより、問題を解決しましndは以下の私のコード

です

var sno = []; 

      var serials = new Bloodhound({ 
       datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'), 
       queryTokenizer: Bloodhound.tokenizers.whitespace, 
       remote: { 
        url: '/Sales/GetSerialNo?query=%QUERY', 
        filter: function (data) { 
         return $.map(data.serialNumbers, function (serial) { 
          return { value: serial }; 
         }); 
        } 
       } 
      }); 

      serials.initialize(); 

      $('#SerialNumber').typeahead({ 
       hint: true, 
       highlight: true, 
       minLength: 3 
      }, { 
       limit: Infinity, 
       displayKey: 'value', 
       source: serials.ttAdapter() 
      }).on("typeahead:select", function (e, data) { 
       $("#lstSerials").append("<li class='list-group-item'>" + data.value + "</li>"); 
       $("#SerialNumber").typeahead("val", ""); 
       sno.push(data); 
      }); 
     }); 

今、それは私が行方不明になったが、我々の両方がちょうど2試合ではありませんどのような第三1を取得している正確に何 -Thanks

Answer 2

こんにちは私は今、それが正常に動作しているあなたのコードの変更を行いました。

シリアル番号を返すフィルタ機能を追加しました。

スクリプト・リファレンス

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/typeahead.js/typeahead.jquery.js"></script> 
<script src="~/typeahead.js/bloodhound.min.js"></script> 


<script> 
     $(document).ready(function() { 
      // Instantiate the Bloodhound suggestion engine 
      var serials = new Bloodhound({ 
       datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'), 
       queryTokenizer: Bloodhound.tokenizers.whitespace, 
       remote: { 
        url: 'http://localhost:49497/DemoType/GetSerialNo?query=%QUERY', 
        filter: function (data) 
        { 
         // Map the remote source JSON array to a JavaScript object array 
         return $.map(data.serialNumbers, function (serial) 
         { 
          return { 
           value: serial 
          }; 
         }); 
        } 
       } 
      }); 

      // Initialize the Bloodhound suggestion engine 
      serials.initialize(); 

      // Instantiate the Typeahead UI 
      $('.typeahead').typeahead(null, { 
       displayKey: 'value', 
       source: serials.ttAdapter() 
      }); 

     }); 

    </script> 

出力： -