Lightning fast search widget with Afosto Instant Search
Tags: javascript, instantsearch, webdev, opensource
Published: 2022-04-05 14:01:02

It's vital to have fast search functionalities on your website. If your search is slow, this negatively impacts your UX, but Google also penalizes your website for this poor performance. But most solutions out there are overpriced or hard to implement. You might choose to build it on your own, but that will take a long time to get it right, and you still need a good UI for it. That is why we made the Afosto Instant Search Widget, so you don't have to.

## How does it work?

The widget can connect to an Afosto Instant Search search engine, which includes settings for the indexes and the filters to use. Everything is configurable in the Afosto platform. That way, the developer only needs to implement the code, and you can change how it is displayed.

You can choose to use a 'search as you type' configuration or let the use search by pressing 'ENTER'. With 'search as you type' the user gets near instant feedback of results for the entered query. Try it out in the CodePen in the next section or on our [website](https://afosto.com/apps/instant-search/widget/).

## How do I implement this on my site?

First, you will need to create a search engine with one or more indexes. You can do that by signing up to our platform on [afosto.com](https://afosto.com/register/) and follow the guides in our [documentation](https://afosto.com/docs/apps/instant-search/).

When you have a configured search engine, you can start implementing the code on your site. Depending on your project, you have a few options on how to include the scripts in your code. You can install it via Yarn or NPM, or via script tags from a CDN. For this article, we will keep it simple and use the CDN setup. Include the scripts below into your site code.

```html
<!-- Styles -->
<link href="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/afosto-instant-search-widget.min.css" />

<!-- Scripts -->
<script defer src="https://cdn.jsdelivr.net/npm/@afosto/instant-search-widget@latest/dist/afosto-instant-search-widget.min.js"></script>
```

This will include the styles and necessary scripts to initialize and render the widget. To actually initialize it, we can add a script tag with the initialization method `AfostoInstantSearchWidget.init()`. This method takes your search engine key and fetches the settings for the search engine indexes.
```html
<script>
  document.addEventListener('DOMContentLoaded', function() {
   AfostoInstantSearchWidget.init('movies-demo');
  });
</script>
```
Now the widget is ready to go and is waiting for you to open it. All that is left to do is to add the data attribute `data-af-instant-search` to a button, input or whatever you choose to use as a trigger.

```html
<button data-af-instant-search>Search</button>
```

That's all there is to it! You can use the CodePen below as an example and to see the speed of our Instant Search.

{% codepen https://codepen.io/gijsbotje/pen/LYeGYqv %}

## That's cool, but I want to customize the design.

You are free to customize the styling and layout of the widget by using CSS. For the colors, we use CSS custom properties. So for example changing the primary color, which is by default blue, is done by setting `--af-is-primary-500` to whatever color you like. In the example below, we flipped the gray values, so it looks like dark mode, and made the primary color scale red. We also changed the layout a little. Because we've used CSS grid for the layout, you are able to reorder the components. The example below has a full height filters sidebar, and the pagination and items per page component are now above the results.

{% codepen https://codepen.io/gijsbotje/pen/oNppGqj %}

This is just an example of what you can customize. By using the classes or other selectors, you can customize everything you want and create your own theme.

## I want fast search, but with my own UI

Like the speed of our search, but want your own implementation? We got you covered! Internally, our widget uses our [Instant Search Client](https://github.com/afosto/instant-search-client) to handle all the requests and functionality. With this client you can build your own solution or connect it to for example [instantsearch.js](https://github.com/algolia/instantsearch.js) or [react-instantsearch-dom](https://github.com/algolia/react-instantsearch). With these packages, you can create your own UI that is connected to Afosto Instant Search. Take a look at the [demo](https://afosto.com/apps/instant-search/demo/) on our website, or use the CodePen below as an example.

{% codepen https://codepen.io/gijsbotje/pen/RwxxXPe %}

## Let us know what you think

We are curious about what you think of our search widget. Feel free to leave a comment or check out our [GitHub](https://github.com/afosto/instant-search-widget) for more information or to report an issue. 

Check out our [website](https://afosto.com/) to [register your Afosto account](https://afosto.com/register/) and take a look at our other apps. You might like [Quicq](https://afosto.com/apps/quicq/), our on the fly image optimization platform.