Table of Contents
I wanted to use an Algolia search box on my website and found that they've already done a lot of the hard work for me, by creating the vue-instantsearch package. This allows me to quickly hook into the Algolia API and query the index for the results in real time.
The problem I had is the vue instant search library will on page load make a blank search to the index and show the last 20 items in the index. I wanted the search to only show the results when the user types into the search box. There's probably other packages that already exist for this functionality but I thought it would be a good exercise to build my own VueJS component that will display the search results as the user types. Therefore let's built our own VueJS component and Laravel API that will only display the results when the user types something into the search box.
There's a Laravel package that makes it very easy to use Algolia wit Models, all you have to do is install the Laravel Scout package, add a trait to the model and import the model into algolia index. To install Laravel Scout you can use composer with the following command.
composer require laravel/scout
Then you can publish the
scout.php config file by using the following command
php artisan vendor:publish --provider="Laravel\Scout\ScoutServiceProvider". This will add a new file to your Laravel config folder.
To use Algolia with Laravel Scout you need to install the following package. This will add the Algolia SDK which is used by Laravel Scout.
composer require algolia/algoliasearch-client-php Now open up the file
config/scout.php and make sure that algolia is selected as the default scout driver. At the bottom of the file is where you need to enter the Algolia API ID and secret.
'algolia' => [ 'id' => env('ALGOLIA_APP_ID', ''), 'secret' => env('ALGOLIA_SECRET', ''), 'search' => env('ALGOLIA_SEARCH', '') ]
We can now add these API settings in the
When the Algolia SDK is installed we can create a blog post Model and add the
Searchable trait. After the trait has been added you need to add a new method called
toSearchableArray which is used to tell Algolia what data to import. For this method we're going to return title, slug, any tags used and the post excerpt.
From the Laravel Scout package we have a command available to us to import the Post into Algolia, to use this command you can use the following.
php artisan scout:import 'App\Models\Post' You can now log into Algolia and see your posts have been added to the search index
With the posts in the Algolia index we can start to create a new route to query the Algolia API and bring back the results from the search query. We can then use this route to display the search results in a new VueJS search component. This Search controller will have one method which will take a request object to validate that there is a querystring parameter of q. We then take the value in the querystring and query Algolia for the index with the value of the search keyword. Because we added the Searchable trait we have access to a new method of search on the Post model.
$posts = Post::search( $request->get('q') )->raw(); The result of the search will return which posts hit the keyboard phrase, we can then return this from the controller in a json format so that we can use this in VueJS.
With the controller built we can setup a route for
/search to call this search controller.
With the endpoint ready to query we can start building the VueJS component to search for the posts in realtime and display the results. We're going to split this up into 3 different components, a parent
SearchBox.vue and a
Results.vue. The first component we need to create is the
Search.vue parent component that will hold the search box and an area to display the results. In the template area we need to display both these components and pass in a query data property that will store the keyboard typed into the search box.
Searchbox.vue is a component that will just have a textbox that's going to be used to hold the keyword that the user types in. On the input event of the textbox we're going to run a method called
updateValue that will emit an event to update the query data property on the parent
In the search results component we need to take the query keyword as a prop and make a query to the Search endpoint which will then query Algolia for the results of the keyword. From the return of the endpoint we then need to display a list of posts and a link to the post for the end user. As this is going to a real time search we need to fetch the results of the query as the user is typing the keyword, therefore we need to watch the query prop for any changes and search Algolia for the results. The search results are split up into 3 parts the HTML template, the CSS styling and the JS component.
The HTML will only be displayed if the results have posts in them therefore we need to the v-show directive
v-show="results.length > 0". Then we'll loop through the results and display a link and the result title.
Then we can style the results in a scrolling div.
Now we need to do the VueJS code to query the the endpoint when the user types in the keyword in the search box. The first thing we need to do is accept a prop of query which will be used to send through to the endpoint. We'll need to store the results of the query in a results data point. We'll need to watch the query prop for any changes and query the endpoint each time this changes.
As this is a prop a new value will enter into the component on the change event of the text box, using the watch property any changes to this variable will then make a new query to the endpoint. Finally we create a method to make a query to the endpoint with the keyword. At the start of the method we need to check if the query keyword is empty as we don't want to call the endpoint for an empty keyword.
Then we add a condition to make sure that the keyword has more than 3 characters before we start searching. If the query keyword is not empty and more than 3 characters then we can query the
/search endpoint and store the result of the endpoint in the results data point. This will automatically display the results in the
The full file of the Results.vue component is