How to add Algolia Search with Laravel Scout

Install package

composer require laravel/scout

Publish Scout configuration

php artisan vendor:publish --provider="Laravel\Scout\ScoutServiceProvider"

Add Laravel\Scout\Searchable trait to your model

<?php

namespace App;

use Laravel\Scout\Searchable;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use Searchable;
}

Change settings in config/scout.php

'queue' => true,

Instal Algolia

composer require algolia/algoliasearch-client-php:^2.2

Create Account

https://www.algolia.com/

Add Algolia id and secret in .env

ALGOLIA_APP_ID=QK0OHTC5IM2
ALGOLIA_SECRET=3d83ff669261125c41bb2a2ae1ae28f72

Import your database records

php artisan scout:import "App\Blog\Post"
php artisan scout:flush "App\Post"

Add to your View file view.blade.php

<input type="text" id="search-input" placeholder="Search" />

Add Javascript

<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script>
<script>

  var client = algoliasearch( 'ALGOLIA_APP_ID' , 'ALGOLIA_SEARCH' );

  var index = client.initIndex('posts');
  autocomplete('#search-input', { hint: true }, [
    {
      autofocus:false,
      source: autocomplete.sources.hits(index, { hitsPerPage: 3 }),
      displayKey: 'title',
      templates: {
        suggestion: function(suggestion) {
          return suggestion._highlightResult.title.value;
        },
        footer: '<div class="aa-dropdown-footer">Search by<img class="aa-logo" src="https://www.algolia.com/assets/algolia128x40.png" width=80/></div>'
      }
    }
  ])
  .on('autocomplete:selected', function(event, suggestion, dataset, context) {
        window.location = suggestion.slug
  });
</script>

Preview

https://mijat.s3.eu-central-1.amazonaws.com/21/Screen-Shot-2019-12-15-at-3.36.06-AM.png

;