我无法在我的网站上工作,这是我尝试过的。
我的HTML和代码
<html>
<head>
<title>typeahead</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
</head>
<body>
<input id="typeahead" type="text" data-provide="typeahead" autocomplete="off">
<script type="text/javascript">
$(document).ready(function() {
$('#typeahead').typeahead({
source: function (query, process) {
$.ajax({
url: 'data.php',
type: 'get',
dataType: 'JSON',
async: true,
data: 'query=' + query,
success: function(data) {
console.log(data);
process(data);
}
});
}
});
});
</script>
</body>
</html>
当我在浏览器中查询data.php时,我得到以下内容
http://localhost/data.php?query=a
输出
["admin","admin2"]
然而,我不确定为什么它不起作用,后端工作,我多次检查我的代码,我不知道我错过了什么。
非常感谢您的帮助。
答案 0 :(得分:0)
$.ajax({
url: 'data.php', // Just try url:'data.php?query=a'
type: 'get',
dataType: 'JSON',
async: true,
data: {'query' : query}, // changed
success: function(data) {
console.log(data);
process(data);
}
});
答案 1 :(得分:0)
你可以用Bootstrap 2.1.0编写这样的ajax调用,直到2.3.2:
$(document).ready(function(){
$('#typeahead').typeahead({
source: function (typeahead, query) {
return $.get('data.php', { 'query': a }, function (data) {
return typeahead.process(data);
});
}
});
});
使用Bootstrap 3.0类型不再捆绑它,所以你可以使用Ajax Type-ahead
它非常易于使用:
$("#ajax-typeahead").typeahead({
ajax: "/path/to/source"
});
答案 2 :(得分:0)
通常,typeahead也使用handlebar.js,所以我在这里包含了。我更新了您的代码以匹配远程示例here(虽然我没有真正测试代码)。希望这会让你指出正确的方向。
<html>
<head>
<title>typeahead</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
</head>
<body>
<input id="typeahead" type="text" data-provide="typeahead" autocomplete="off">
<script type="text/javascript">
$(document).ready(function() {
var mySearch = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'data.php',
remote: 'data.php?query=' + query
});
mySearch.initialize();
$('#typeahead').typeahead(null, {
name: 'best-pictures',
displayKey: 'value',
source: mySearch.ttAdapter()
});
});
</script>
</body>
</html>