Page not being rendered after performing search

Below is the standard page in HTML with pagination working well. The problem arises when I perform a search. I would like to know why when I run the search it complains that "vehicles is an undefined variable"

@foreach($all as $one)
<div class="card-description">
    <div class="card-text">
        <div class="card-text-wrapper">
            <div class="card-details">
                <p class="vehicle-name"></p>
                <p class="vehicle-details"></p>
                <p class="vehicle-details"></p>
            </div>
        </div>
    </div>
    <div class="card-text">
        <div class="card-text-wrapper">
            <h1 class="price-tag">¢ </h1>
        </div>
    </div>
</div>

@endforeach

Below is the javascript function I tried for performing the search but unfortunately I do not know how to update the pagination to accept the new search values:

function searchVehicle(){
    var make = document.getElementById("vehicle_make");
    var strMake = make.options[make.selectedIndex].text;
    var model = document.getElementById("vehicle_model");
    var strModel = model.options[model.selectedIndex].text;

    var cardDisplay = document.getElementById("card_display");
    var cardDeck = document.getElementById("card_deck");

    var strUrl = vehicle_url + strMake + '/' +strModel;
    var obj = sendRequest(strUrl);

    while (cardDeck.firstChild) {
        cardDeck.removeChild(cardDeck.firstChild);
    }
}

Below is my form which would be performing the search

     
    <div>
        <div class="wrapper-dropdown-5" tabindex="1" >
            <span class="placeholder">Select make</span>
            <ul class="dropdown" style="z-index:1000" name="mak" id="vehicle_make">
                @foreach($vehicles as $vehicle)
                    --}}
                    <li class="option-make" id="make" value=""><a></a></li>
                    @endforeach
            </ul>
        </div>
        <div id="dd" class="wrapper-dropdown-5 inactive" tabindex="2"  >
            <span class="placeholder">Select model</span>
            <ul class="dropdown" id="vehicle_model">
            </ul>
        </div>
    </div>

</div>
<div class="button-wrap">
    
</div>

Below is the way I tried to display the search results but had an error that "vehicles" is an undefined variable:

public function searchVehicle(SearchVehicleRequest $request){
    $make=$request->input('make');
    $model=$request->input('model');
    $results = Vehicles::where('make', 'LIKE', '%'.$make. '%')->orWhere('model','LIKE', '%'.$vehicle_model.'%')->paginate(2);
    return Response::json(\View::make('Garages.home', array('all' => $results))->render());    
    }

And my route:

Route::get('search', ['as' => 'search', 'uses' => 'VehiclesController@searchVehicle']);

I can populate the HTML but don't know how to update the pagination..unless this whole process is wrong and there is a simpler way to get this done with ajax? or is page rendering the wrong way to go for something like this??

via d3vguy