Typeahead.jsオートコンプリートに何も表示されない

Question

私の質問のような多くの同様の質問があります。私が必要とするのは、私の過ちがどこであるかを分析することです。 私のコードはFiddleです。

あなたが見ることができるように、私はオートコンプリートでフォームを作成し、私はそこに先行入力

$(document).ready(function(){ 
 
    $('#kode').typeahead({ 
 
     source: function(query, process) { 
 
     objects = []; 
 
     var data = [ 
 
      {"kode":"X1","nama":"XL REG NASIONAL"}, 
 
      {"kode":"X10","nama":"XL REG NASIONAL"}, 
 
      {"kode":"X100","nama":"XL REG NASIONAL"}, 
 
      {"kode":"X15","nama":"XL REG NASIONAL"}, 
 
      {"kode":"X25","nama":"XL REG NASIONAL"}, 
 
      {"kode":"X30","nama":"XL REG NASIONAL"} 
 
      ]; 
 
     
 
     $.each(data, function(i, object) { 
 
      objects.push(object.kode + '#' + object.nama); 
 
     }); 
 

 
     process(objects); 
 
     }, 
 
     updater: function (item) { 
 
     var s = item.split('#'); 
 
     return s[0]; 
 
     }, 
 
     matcher: function (item) { 
 
     var s = item.split('#'); 
 
     return s[0].toLowerCase().indexOf(this.query.toLowerCase()) != -1 
 
     }, 
 
     highlighter: function (item) { 
 
     var s = item.split('#'); 
 
     var regex = new RegExp('(' + this.query + ')', 'gi'); 
 
     return s[0].replace(regex, "<strong>$1</strong>"); 
 
     } 
 
    }); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script> 
 
<form class="form-horizontal" id="form-point"> 
 
\t <div class="form-group"> 
 
\t \t <label class="control-label col-sm-2">Kode</label> 
 
\t \t <div class="col-sm-8"> 
 
\t \t \t <input type="text" id="kode" name="kode" class="form-control" autofocus="autofocus"> 
 
    </div> 
 
\t </div> 
 
\t <div class="form-group"> 
 
\t \t <label class="control-label col-sm-2">Keterangan</label> 
 
\t \t <div class="col-sm-8"> 
 
\t \t \t <input type="text" class="form-control" id="keterangan" name="keterangan" readonly="readonly"> 
 
\t </div> 
 
\t </div> 
 
\t <div class="form-group"> 
 
\t \t <label class="control-label col-sm-2">Point</label> 
 
\t \t <div class="col-sm-8"> 
 
\t \t \t <input type="text" id="point" name="point" class="form-control">   </div> 
 
\t </div> 
 
</form>

Answer 1

からの暗示をフィールド「Kodeを」CLIKないときに先行入力のjsファイルに問題があります、私は

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.js"></script> 

<form class="form-horizontal" id="form-point"> 
    <div class="form-group"> 
     <label class="control-label col-sm-2">Kode</label> 
     <div class="col-sm-8"> 
      <input type="text" id="kode" name="kode" class="form-control" autofocus="autofocus"> 
    </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2">Keterangan</label> 
     <div class="col-sm-8"> 
      <input type="text" class="form-control" id="keterangan" name="keterangan" readonly="readonly"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2">Point</label> 
     <div class="col-sm-8"> 
      <input type="text" id="point" name="point" class="form-control">   </div> 
    </div> 
</form> 

チェックここbootstrap3の先行入力のjsファイルを使用していますhttps://jsfiddle.net/1b8a5ber/4/