bootstrap typeahead with ajax
Question
I'm not able to get typeahead to work on my website, here what I have tried.
My html and code
<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>
when I query data.php in my browser, I get the following
http://localhost/data.php?query=a
output
["admin","admin2"]
Yet, I'm not sure why its not working, backend works, I have checked my code many times, I wonder what I'm missing.
Your help is highly appreciated.
3 answers
solution1
0 2015-01-08 04:32:33
$.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);
}
});
solution2
0 2015-01-08 04:41:28
You can write you ajax call like this with Bootstrap 2.1.0 up to 2.3.2:
$(document).ready(function(){
$('#typeahead').typeahead({
source: function (typeahead, query) {
return $.get('data.php', { 'query': a }, function (data) {
return typeahead.process(data);
});
}
});
});
with Bootstrap 3.0 type is no longer bundled with it, So you can use Ajax Type-ahead
its very easy to use:
$("#ajax-typeahead").typeahead({
ajax: "/path/to/source"
});
solution3
0 2015-01-08 04:46:03
Typically typeahead uses handlebar.js as well so I included that here. I updated your code to match the remote example here (though I didn't actually test the code). Hopefully that will get you pointed in the right direction.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.