CODEWITHSUNDEEP
javascriptphpjquerylaravel
Barret Wallace
Barret Wallace

Reputation: 155

How to use jQuery autocomplete (=live search) with a Laravel Controller

This is (part of) my view, generated by Laravel Forms:

<form method="POST" action="http://laravelapp/search" accept-charset="UTF-8">
    <input name="_token" type="hidden" value="g3RA...">
    <input type="text" placeholder="Search" id="terms">
</form>

<script>
$( function() {
    var testdata = [ "ActionScript", "AppleScript", "JavaScript" ];
    $( "#terms" ).autocomplete({
        minLength: 1,
        source: '{{ URL::route('index.search') }}'
        //source: testdata
    });
});
</script>

These is the route for index.search:

Route::post('/search', 'IndexController@search')->name('index.search');

This is my IndexController:

public function search(Request $request)
{
   return Response('Hello World');
}

For the sake of simplicity, I replaced the actual search algorithm with a static response Hello World. However, the autocomplete works fine if I uncomment the //source: testdata line in the javascript code. When I use the route to the IndexController, nothing happens.

When I press enter (=submit the form), a new page is loaded with Hello World, but there's no dynamic search result.

As you can see, I inserted the CSRF token and the search()method returns a valid response. However, it is not triggered by the javascript. My questions, thus, are:

Any help is greatly appreciated!

Upvotes: 0

Views: 212

Answers (1)

Taplar
Taplar

Reputation: 24965

The autocomplete expects its source to be an array of data. By default the way to respond this back to the client is in the json format. You should try changing your endpoint to not only return an array, but encode that array into the json format so autocomplete will know how to handle it.

Upvotes: 1

Related Questions