javascript - Typeahead.js 未显示建议

Question

我正在尝试为输入框预先输入。为此，我正在使用 typeahead.js。我正在使用相同的代码来学习此功能。虽然我没有收到任何错误，但它没有显示建议。我还包括了所需的所有脚本，如下所示:

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

Html 如下:

<div class="container">
<div id="the-basics">
  <input class="typeahead" type="text" placeholder="States of USA">
</div>
  </div>

js如下:

var substringMatcher = function(strs) {
console.log('strs', strs);
return function findMatches(q, cb) {
  console.log('q', q);
  var matches, substringRegex;

  // an array that will be populated with substring matches
  matches = [];
  console.log('matches', matches);

  // regex used to determine if a string contains the substring `q`
  substrRegex = new RegExp(q, 'i');

  // iterate through the pool of strings and for any string that
  // contains the substring `q`, add it to the `matches` array
  $.each(strs, function(i, str) {
    if (substrRegex.test(str)) {
      matches.push(str);
    }
  });
  
  console.log('matches', matches);

  cb(matches);
};


};
  
  var states = ['Alabama', 'Alaska', 'Arizona', 'California',
    'Colorado', 'Connecticut', 'Delaware', 'Florida'
  ];
  
  $('#the-basics .typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
  },
  {
    name: 'states',
    source: substringMatcher(states)
  });

请帮我解决这个问题。
PS:我尝试过 StackOverflow 上的不同解决方案，比如 this，但它对我不起作用。

Answer 1

const states = [
  "Alabama",
  "Alaska",
  "Arizona",
  "California",
  "Colorado",
  "Connecticut",
  "Delaware",
  "Florida"
];

$("#the-basics .typeahead").typeahead({
  hint: true,
  highlight: true,
  minLength: 1,
  name: "states",
  source: states
});

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


<div class="container">
  <div id="the-basics">
    <input class="typeahead" type="text" placeholder="States of USA" autocomplete="off">
  </div>
</div>