Algolia InstantSearch with Svelte 3 259 words.
Created
Last Updated
Last Updated
This tutorial is an extension of the [Algolia Cloud Functions Guide](/lessons/algolia-cloud-functions/). You must have the Cloud Functions deployed to start making instant search queries from your frontend app.
Install Algolia
Algolia does not provide official support for Svelte, but we can easily implement our own custom UI with AlgoliaSearch.
Note. You can also use InstantSearch.js if you want pre-built components.
command line
npm install algoliasearchUpdate the index.html
The Algolia client makes a reference to process, which does not exist in the browser. Add the code below to prevent errors.
public/index.html
<title>Svelte app</title>
<!-- ADD THIS LINE -->
<script>window.process = {env: { DEBUG: undefined } }</script>Svelte Algolia Search Component
The component below initializes the AlgoliaSearch lite, then binds a request to each keyup event on a form input. Algolia returns an object with the resulting hits, which are updated on the component’s hit property.
Search.svelte
<script>
import { onMount } from 'svelte';
import algoliasearch from 'algoliasearch/lite';
let searchClient;
let index;
let query = '';
let hits = [];
onMount(() => {
searchClient = algoliasearch(
'YOUR-APP-ID',
'YOUR-SEARCH-ONLY-KEY'
);
index = searchClient.initIndex('customers');
// Warm up search
index.search({ query }).then(console.log)
});
// Fires on each keyup in form
async function search() {
const result = await index.search({ query });
hits = result.hits;
console.log(hits)
}
</script>
<style>
:global(em) {
color: red;
font-weight: bold;
background: black;
}
</style>
<h1>Svelte InstantSearch</h1>
<div>
<input type="text" bind:value={query} on:keyup={search}>
</div>
{#each hits as hit}
<img src={hit.avatar} alt={hit.username}>
<section>
<h3>{hit.username} {hit.objectID}</h3>
<!-- <p>{hit.bio}</p> -->
<p contenteditable bind:innerHTML={hit._highlightResult.bio.value}></p>
</section>
{/each}
Demo of Algolia Search in Svelte 3