Lightning fast search widget with Afosto Instant Search

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.

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 and follow the guides in our documentation.

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.

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

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

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

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.

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 to handle all the requests and functionality. With this client you can build your own solution or connect it to for example instantsearch.js or react-instantsearch-dom. With these packages, you can create your own UI that is connected to Afosto Instant Search. Take a look at the demo on our website, or use the CodePen below as an example.

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 for more information or to report an issue. 

Check out our website to register your Afosto account and take a look at our other apps. You might like Quicq, our on the fly image optimization platform.