The files are self explanatory. Make a file, call it anything. In my case jq2.php.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
// document is made ready so that the program starts when we load this page
$(document).ready(function(){
// it tells that any key activity in the "subcat_search" filed will execute the query.
$("#subcat_search").keyup(function(){
// we assemble the get link for the direction to our engine "gs.php".
var link1 = "http://127.0.0.1/jqm/gs.php?needle=" + $("#subcat_search").val();
$.ajax({
url: link1,
// ajax function is called sending the input string to "gs.php".
success: function(result){
// result is stuffed in the label.
$("#search_val").html(result);
}
});
})
});
</script>
</head>
<body>
<!-- the input field for search string -->
<input type="text" id="subcat_search">
<br>
<!-- the output field for stuffing the output. -->
<label id="search_val"></label>
</body>
</html>
Now we will include an engine, make a file, call it anything you like. In my case it is gs.php.
$head = "https://maps.googleapis.com/maps/api/place/textsearch/json?query="; //our head
$key = "your key here"; //your key
$hay = $_GET['needle'];
$hay = str_replace(" ", "+", $hay); //replacing the " " with "+" to design it as per the google's requirement
$kill = $head . $hay . "&key=" . $key; //assembling the string in proper way .
print file_get_contents($kill);
I have tried to keep the example as simple as possible. And because it executes the link on every keypress, the quota of your API will be consumed pretty fast.
Of course there is no end to things we can do, like putting the data into a table, sending to database and so on.