For a website I wanted to realize a type ahead search with typeahead.js from twitter to gather information from a local database. For the first step I was looking for some easy code which I found on a blog here.
My developing enviroment is a local XAMP stack on a Mac. I know all the basics about AJAX and created some good working stuff with simple javascript. I am new to jQuery and just copied the code from the blog website. I loaded down newest jQuery and typeahead.js framework and implemented it as the blog website recommends it. jQuery is initiated properly, but I cant control if typeahead.js is initiated properly. Bootstrap I left out at this step assuming that its not relevant for my test. I simply wanted to catch the Ajax call in PHP. But finally I have no success. This is the basic code.
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>PHP MySQL Typeahead Autocomplete</title>
<meta charset="utf-8">
echo '<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>';
echo '<script type="text/javascript" src="js/typeahead.jquery.min.js"></script>';
<script>
$(document).ready(function() {
$('input.city').typeahead({
name: 'city',
remote: 'city.php?query=%QUERY'
});
})
</script>
</head>
<body>
<div class="content">
<form>
<h1>Try it yourself</h1>
<input type="text" name="city" size="30" class="city" placeholder="Please Enter City or ZIP code">
</form>
</div>
</body>
</html>
And here is the city.php for for simple catching the AJAX call and sending back the query.
<?php
if (isset($_REQUEST['query']))
echo json_encode(array('label' => 'success', 'value' => $_REQUEST['query'] '));
else
echo json_encode(array('label' => 'no success', 'value' => $_REQUEST['query'] '));
?>
All the code should do here is showing that typeahead and AJAX works. But it doesnt. And I do not know why. So my questions are :
Is the remote key in the jQuery function properly setup ?
The php code uses the $_REQUEST variable, other code refer to $_GET. What is correct ?
With javascript I can log to the console easily on the AJAX callback with console.log(...). How do that with jQuery ?
Any help is appreciated.