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"
Remove all index records from search
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>