Getting Ajax to display your search result from a class - ajax

Question

I'm working with a recipe API and at the moment you get an error because I'm calling for something that doesn't exist ($contentSearch for example) and I think I can solve this with using Ajax, and no matter what I want to use it to learn how it works.
I'm using fork2fork API and working in Laravel 5.
So far I've looked around but haven't found anything that works. Maybe because I'm calling for a function and from there getting the result?
Feel free to mess up my entire code, I want to learn how to make it right instead of making it just work!
And to make my question clear: How do I show my result from the search by using Ajax?
Here is the html:
#extends('app')
#section('content')
{!! Form::open(['url' => 'searchRecipe']) !!}
{!! Form::text('search') !!}
{!! Form::submit('Search recipe') !!}
{!! Form::close() !!}
<p>if you lucky and have more than one thing in your fridge, separate them with a ',' and nothing else. As in no space.</p>
<div class="text-info">
<ul class="list-unstyled">
#foreach($contentSearch->recipes as $recipe)
<li>{{$recipe->title}}</li>
#endforeach
</ul>
</div>
#stop
And here is the function that is getting called if you push the submit button:
public function getSearch() {
$apiKey = "thats a secret i never tell";
$search = Request::get('search');
// insert search and API key in URL
$apiUrl = "http://food2fork.com/api/search?key=" . $apiKey
. "&q=". $search ;
// get the content of the file
//header('Content-Type: application/json');
$contentSearch = json_decode(file_get_contents($apiUrl));
return view('index', compact('contentSearch'));
}

Answer 1

I'm not sure I've fully understood the question but I hope this helps.
View
{!! Form::open(['url' => 'recipes']) !!}
{!! Form::text('search', null, ['id' => 'search']) !!}
{!! Form::submit('Search recipe') !!}
{!! Form::close() !!}
<ul id="result"></ul>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){
// get the form submit event
$('form').submit(function(event){
// stop the form from submitting
event.preventDefault();
// the form object
var form = $(this);
// perform ajax post request
$.post(
form.attr('action'), // this will go to form url
form.serialize(), // grab the form data
function(data) { // do something with the response
console.log(data); // see response in the console
// add title of recipes in a list
$.each(data.recipes, function(key, value) {
$('#result').append($('<li></li>').text(value.title));
});
}
);
});
});
</script>
routes.php just for demo you can move this to your controller
Route::post('recipes', function() {
$apiKey = "yourAPIkey";
$search = \Request::get('search');
// insert search and API key in URL
$apiUrl = "http://food2fork.com/api/search?key=" . $apiKey . "&q=". $search ;
// get the content of the file
//header('Content-Type: application/json');
$contentSearch = json_decode(file_get_contents($apiUrl));
return response()->json($contentSearch);
});
I'm guessing as an alternative you could use JSONP, but I'm new to JSONP and struggled to get it working with food2fork's api. Perhaps research JSONP and see if it's what you want. Example of JSONP with JQuery: https://learn.jquery.com/ajax/working-with-jsonp/