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)

  });

请帮我解决这个问题。

Answer 1

const states = [&nbsp; "Alabama",&nbsp; "Alaska",&nbsp; "Arizona",&nbsp; "California",&nbsp; "Colorado",&nbsp; "Connecticut",&nbsp; "Delaware",&nbsp; "Florida"];$("#the-basics .typeahead").typeahead({&nbsp; hint: true,&nbsp; highlight: true,&nbsp; minLength: 1,&nbsp; name: "states",&nbsp; 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">&nbsp; <div id="the-basics">&nbsp; &nbsp; <input class="typeahead" type="text" placeholder="States of USA" autocomplete="off">&nbsp; </div></div>