我正在按照这个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库已正确加载，我在谷歌Chrome控制台中没有看到任何错误。我的数据库也正确连接，因为我有其他路由访问连接池，这是正常工作。主路由正在加载搜索栏，但是当我在mySQL数据库中输入表名时，它不会给任何自动完成。
基于这里的示例：http://twitter.github.io/typeahead.js/examples/，看起来您缺少构建一个Bloodhound对象以传递给typeahead的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>