API Reference / Laravel / Client side search
Feb. 18, 2019

Client side search

Putting aside data indexing operations, which are done on your servers, we recommend that your search operations be done directly on the client side, using JavaScript. This will significantly improve your search response times, and reduce the load and traffic on your servers.

Generate search keys

Regarding client side implementations, if there is one thing to remember is to use the search only API keys. Your Admin API key is very sensitive: it should never be shared with anyone and must remain confidential.

Scout Extended provides the searchKey method to generate a search key for each searchable class:

1
2
3
use Algolia\ScoutExtended\Facades\Algolia;

$searchKey = Algolia::searchKey(Article::class);

The returned $searchKey will only have rights to search on the given searchable class.

Internally, the searchKey method uses the application cache to return the same search key until it’s gets expired - a lifetime of 24 hours.

Integration with Vue InstantSearch

Scout Extended does not dictate which JavaScript Framework you use. You are free to pick your favorite InstantSearch integration. On the example below, we are going to cover the Vue InstantSearch integration.

Installation

Since Laravel ships with Vue by default, you have nothing to set up. You’ll only need to add vue-instantsearch as a dependency with NPM and register it as a Vue plugin:

npm install
npm install vue-instantsearch@1

Then, open up your resources/assets/js/app.js and add the following line just after the window.Vue = require('vue'); line:

1
2
import InstantSearch from 'vue-instantsearch';
Vue.use(InstantSearch);

Remember, to compile the js into the app.js bundle file you need to run:

npm run watch

Usage

Concerning the usage, we won’t focus too much on the design in this documentation. However, to get you started - let’s bootstrap a small search interface:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app"> <!-- In a default Laravel app, Vue will render inside an #app div -->
    <ais-index app-id="{{ config('scout.algolia.id') }}"
               api-key="{{ Algolia\ScoutExtended\Facades\Algolia::searchKey(App\Article::class) }}"
               index-name="{{ (new App\Article)->searchableAs() }}">

        <ais-input placeholder="Search articles..."></ais-input>

        <ais-results>
           <template scope="{ result }">
               <div>
                   <h1>@{{ result.title }}</h1>
                   <h4>@{{ result.summary }}</h4>
               </div>
           </template>
        </ais-results>
    </ais-index>
</div>

Of course, if you’re interested in learning more about using Vue InstantSearch components, you should read the Vue InstantSearch documentation.

InstantSearch is also available for React and in a framework-agnostic version.

Did you find this page helpful?