Typeahead.js autocomplete not showing any sugestions

Question

I know that here there are many similar questions like my question. what I need is help to analyze where my mistake. you can see my code in Fiddle .

as you can see, I created a form with autocomplete, when i clik field "Kode" there no sugestion from typeahead

 $(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"> <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> 

Answer 1

There is an problem with your typeahead js file, i have used bootstrap3 typeahead js file

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

Check here : https://jsfiddle.net/1b8a5ber/4/