Algolia Search with Svelte

Algolia InstantSearch with Svelte 3 259 words.

By Jeff Delaney

Created Aug 25, 2019
Last Updated Aug 25, 2019

👀

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

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}

Algolia Search with Svelte

Install Algolia

Update the index.html

Svelte Algolia Search Component

Q&A Chat