I am learning about retrieving data from database for typehead input.I was trying to follow this tutorial Ajax to Bootstrap Typeahead From Database
In the beginning, i want to see whether the ajax is sending the data to php file
$(document).ready(function() {
$('input.typeahead').typeahead({
source: function (typeahead,query) {
$.ajax({
url: 'data.php',
type: 'POST',
dataType: 'JSON',
data: 'query=' + query,
async: false,
success: function(data) {
console.log(data);
}
});
}
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
</head>
<body >
<div class="container" >
<div class="panel-group">
<div class="panel panel-primary" >
<div class="panel-heading" >
<h3 class="panel-title" style="text-align: center;">Test</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-3" for="acode">Item Name</label>
<div class="col-sm-5 " id = "empid" >
<div class=" input-group ">
<input type="text" class=" form-control typeahead tt-query" autocomplete="off" spellcheck="false" name="itemname" id="item" placeholder="Enter Item">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>Here is my data.php:
<?php
echo $_POST;
?>
However Iam getting this error: Error: one of local, prefetch, or remote is required.Do i need bloodhound remote or another library I don't Know.I am stuck as a novice.Please Please Please help Me.Thanks
</div>
