CODEWITHSUNDEEP
phplaravellaravel-5algolia
Santosh Achari
Santosh Achari

Reputation: 3006

Algolia Autocomplete by calling Laravel endpoint

Is it possible to use a Laravel Endpoint, to use as Algolia Autocomplete index?

Laravel Side: 

Route::get('/search',function(){
      $query = request(q);
      return App\Contacts::search($query)->where('company_id',2)->raw();
}

Frontend

var index = 'http://laravel.app/search';

$('#contacts').autocomplete({ hint: false }, [
        {
            source: $.fn.autocomplete.sources.hits(index, { hitsPerPage: 5 }),
            displayKey: 'name',
            templates: {
                dropdownMenu: '#my-custom-menu-template',
                footer: '<div class="branding">Powered by <img src="https://www.algolia.com/static_assets/images/press/downloads/algolia-logo-light.svg" /></div>',
                suggestion: function(suggestion) {
                    return suggestion._highlightResult.iata.value + ' '+ suggestion._highlightResult.name.value ;
                }
            }
        }
    ]);

Upvotes: 1

Views: 479

Answers (2)

Julien Bourdeau
Julien Bourdeau

Reputation: 1193

There is no easy change to change the endpoint in autocomplete.js I think. It will require to modify the library.

Can I ask why you want to do this? It's not recommended to call your backend, it's best to call Algolia directly. The main reason to use Algolia in the backend is to integrate it quickly and not use frontend libraries like autocomplete.js or InstantSearch.js. Since you're willing to use them, you should call Algolia directly. It will save a lot of network latency and offload your server.

Each time someone search, the query will be:

browser -> Algolia -> browser

instead of

browser -> server -> Algolia -> server -> browser

Upvotes: 2

common sense
common sense

Reputation: 3912

Without knowing Algolias API, I would use Curl or Guzzle to send a GET request (or whatever they want) to there API, transform the respond according to what the autocomplete JS is expecting and and push it back to the frontend.

Upvotes: 0

Related Questions