我正在关注这个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 数据库中存在的表名称时，它不会提供任何自动完成。
最佳答案
基于此处的示例: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>
关于mysql - Typeahead.js 未填充搜索框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55203152/