Algolia Search with Svelte

👀

This tutorial is an extension of the Algolia Cloud Functions Guide. 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 algoliasearch

Update 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.

file_type_html 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

Demo of Algolia Search in Svelte 3

Q&A Chat