Client Side Search

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 vue-instantsearch algoliasearch

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

1
2
3
4
5
import algoliasearch from 'algoliasearch/lite';
window.algoliasearch = algoliasearch;

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.

In this case we need to use the ID and API key provided by Laravel Scout Extended, so we need to move the Vue initialization inside the Blade template. This is necessary, since PHP retrieves that data at request time, not build time.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="app">
  <!-- In a default Laravel app, Vue will render inside an #app div -->
  <ais-instant-search
    :search-client="searchClient"
    index-name="{{ (new App\Article)->searchableAs() }}"
  >
    <ais-search-box placeholder="Search articles..."></ais-search-box>

    <ais-hits>
      <template slot="item" slot-scope="{ item }">
        <div>
          <h1>@{{ item.title }}</h1>
          <h4>@{{ item.summary }}</h4>
        </div>
      </template>
    </ais-hits>
  </ais-instant-search>
</div>

<script>
new Vue({
  data: function() {
    return {
      searchClient: algoliasearch(
        '{{ config('scout.algolia.id') }}',
        '{{ Algolia\ScoutExtended\Facades\Algolia::searchKey(App\Article::class) }}',
      ),
    };
  },
  el: '#app',
});
</script>

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 Angular, React and in a framework-agnostic version.