Typeahead.js没有显示建议

问题描述

我正在尝试为输入框输入内容。我为此使用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，但对我来说不起作用。

解决方法

{items.map((d) => (
        <Accordion key={d.ID} 
          title={
            <div>
              <tr className="btn-heading">
                <td>{d.ID}</td>
                <td>{d.Mail}</td>
                <td>{d.Name}</td>
                <td>{d.PhoneNo}</td>
                <td>{d.City}</td>
                <td>{d.Date}</td>
                <td>{d.Time}</td>
              </tr>
            </div>
          }
          content={
            <div>
              <p className="header">
                  <span className="header-content">Shipping Address:</span>
                  292 Naqshband Colony. Near rabbania Mosque. Multan
              </p>
              <Table size="sm">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Article No</th>
                    <th>Product Name</th>
                    <th>Quantity</th>
                    <th>Price</th>
                    <th>Total Amount</th>
                  </tr>
                </thead>
                <tbody>
                  {products.map((c) =>
                  (
                    if(c.ID === 1) {   <--- this if condition is not working      
                      <tr key={c.ID}>
                        <td>{c.ArticleNo}</td>
                        <td>{c.ProductName}</td>
                        <td>{c.Quantity}</td>
                        <td>{c.Price}</td>
                        <td>{c.TotalAmount}</td>
                      </tr> 
                    }                                        
                  ))};
                </tbody>
              </Table>

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

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