Typeahead.js 未填充搜索框答案

【问题标题】：Typeahead.js not populating the search boxTypeahead.js 未填充搜索框
【发布时间】：2019-03-17 01:45:00
【问题描述】：

我按照这个 webpage 教程使用 Typeahead.js 从 MYSQL 数据库填充输入框

Server.js

const pool=mysql.createPool({
    connectionLimit:10,
    host:'localhost',
    user:'user',
    password:'password',
    database:'table'
})
router.get("/",(req,res)=>{
    res.render("home")
})




router.get('/search',function(req,res){
    pool.query('SELECT tableName from parts where tableName like "%'+req.query.key+'%"',
    function(err, rows, fields) {
    if (err) throw err;
    var data=[];
    for(i=0;i<rows.length;i++)
    {
    data.push(rows[i].tableName);
    }
    res.end(JSON.stringify(data));
    });
    });

home.ejs

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="typehead.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote: 'http://localhost:3000/search?key=%QUERY',
limit: 10
});

});

</script>
</head>
<body>
<input class="typeahead tt-query" spellcheck="false" autocomplete="off" name="typeahead" type="text" />

typeahead.js 库已正确加载，我在我的 google chrome 控制台中看不到任何错误。我的数据库也已正确连接，因为我还有其他访问连接池的路由，这些路由工作正常。主路由正在加载搜索栏，但是当我在其中键入 mySQL 数据库中存在的表名称时，它不会自动完成。

【问题讨论】：

如果您通过 Google Chrome 开发控制台查看网络调用，您是否看到任何使用您的搜索字词进行的 ajax 调用？
我输入时没有请求被触发

标签： mysql node.js typeahead.js

【解决方案1】：

根据此处的示例：http://twitter.github.io/typeahead.js/examples/，您似乎缺少构建 Bloodhound 对象以传递给预先输入的 Source 属性。

他们的例子：

var bestPictures = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: '../data/films/post_1960.json',
  remote: {
    url: '../data/films/queries/%QUERY.json',
    wildcard: '%QUERY'
  }
});

$('#remote .typeahead').typeahead(null, {
  name: 'best-pictures',
  display: 'value',
  source: bestPictures
});

对于你的脚本，我会尝试这个改变：

<script type="text/javascript">
    $(document).ready(function(){
$('input.typeahead').typeahead({
  name: 'typeahead',
  source: new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: '../data/films/post_1960.json',
    remote: {
      url: '-http://localhost:3000/search?key=%QUERY',
      wildcard: '%QUERY'
    }
  }),
  limit: 10
});

});

</script>

【讨论】：

使用上面的代码也不起作用。我试图测试不使用远程数据库的基本代码也不起作用。我做了一个codepen