Typeahead.js 自动完成未显示任何建议

Question

我知道这里有很多类似我的问题。我需要的是帮助分析我的错误所在。你可以在 Fiddle.

中看到我的代码

如您所见，我创建了一个带有自动完成功能的表单，当我点击字段时 "Kode" 没有来自 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></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

你的typeahead js文件有问题，我用过bootstrap3 typeahead 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>

在此处查看：https://jsfiddle.net/1b8a5ber/4/

Typeahead.js 自动完成未显示任何建议

Typeahead.js autocomplete not showing any sugestions

html

javascript

jquery

typeahead

twitter-bootstrap