Search by Algolia
Easily integrate Algolia into native apps with FlutterFlow
engineering

Easily integrate Algolia into native apps with FlutterFlow

Algolia's advanced search capabilities pair seamlessly with iOS or Android Apps when using FlutterFlow. App development and search design ...

Chuck Meyer

Sr. Developer Relations Engineer

Algolia's search propels 1,000s of retailers to Black Friday success
e-commerce

Algolia's search propels 1,000s of retailers to Black Friday success

In the midst of the Black Friday shopping frenzy, Algolia soared to new heights, setting new records and delivering an ...

Bernadette Nixon

Chief Executive Officer and Board Member at Algolia

Generative AI’s impact on the ecommerce industry
ai

Generative AI’s impact on the ecommerce industry

When was your last online shopping trip, and how did it go? For consumers, it’s becoming arguably tougher to ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

What’s the average ecommerce conversion rate and how does yours compare?
e-commerce

What’s the average ecommerce conversion rate and how does yours compare?

Have you put your blood, sweat, and tears into perfecting your online store, only to see your conversion rates stuck ...

Vincent Caruana

Senior Digital Marketing Manager, SEO

What are AI chatbots, how do they work, and how have they impacted ecommerce?
ai

What are AI chatbots, how do they work, and how have they impacted ecommerce?

“Hello, how can I help you today?”  This has to be the most tired, but nevertheless tried-and-true ...

Catherine Dee

Search and Discovery writer

Algolia named a leader in IDC MarketScape
algolia

Algolia named a leader in IDC MarketScape

We are proud to announce that Algolia was named a leader in the IDC Marketscape in the Worldwide General-Purpose ...

John Stewart

VP Corporate Marketing

Mastering the channel shift: How leading distributors provide excellent online buying experiences
e-commerce

Mastering the channel shift: How leading distributors provide excellent online buying experiences

Twice a year, B2B Online brings together America’s leading manufacturers and distributors to uncover learnings and industry trends. This ...

Jack Moberger

Director, Sales Enablement & B2B Practice Leader

Large language models (LLMs) vs generative AI: what’s the difference?
ai

Large language models (LLMs) vs generative AI: what’s the difference?

Generative AI and large language models (LLMs). These two cutting-edge AI technologies sound like totally different, incomparable things. One ...

Catherine Dee

Search and Discovery writer

What is generative AI and how does it work?
ai

What is generative AI and how does it work?

ChatGPT, Bing, Bard, YouChat, DALL-E, Jasper…chances are good you’re leveraging some version of generative artificial intelligence on ...

Catherine Dee

Search and Discovery writer

Feature Spotlight: Query Suggestions
product

Feature Spotlight: Query Suggestions

Your users are spoiled. They’re used to Google’s refined and convenient search interface, so they have high expectations ...

Jaden Baptista

Technical Writer

What does it take to build and train a large language model? An introduction
ai

What does it take to build and train a large language model? An introduction

Imagine if, as your final exam for a computer science class, you had to create a real-world large language ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

The pros and cons of AI language models
ai

The pros and cons of AI language models

What do you think of the OpenAI ChatGPT app and AI language models? There’s lots going on: GPT-3 ...

Catherine Dee

Search and Discovery writer

How AI is transforming merchandising from reactive to proactive
e-commerce

How AI is transforming merchandising from reactive to proactive

In the fast-paced and dynamic realm of digital merchandising, being reactive to customer trends has been the norm. In ...

Lorna Rivera

Staff User Researcher

Top examples of some of the best large language models out there
ai

Top examples of some of the best large language models out there

You’re at a dinner party when the conversation takes a computer-science-y turn. Have you tried ChatGPT? What ...

Vincent Caruana

Sr. SEO Web Digital Marketing Manager

What are large language models?
ai

What are large language models?

It’s the era of Big Data, and super-sized language models are the latest stars. When it comes to ...

Catherine Dee

Search and Discovery writer

Mobile search done right: Common pitfalls and best practices
ux

Mobile search done right: Common pitfalls and best practices

Did you know that 86% of the global population uses a smartphone? The 7 billion devices connected to the Internet ...

Alexandre Collin

Staff SME Business & Optimization - UI/UX

Cloud Native meetup: Observability & Sustainability
engineering

Cloud Native meetup: Observability & Sustainability

The Cloud Native Foundation is known for being the organization behind Kubernetes and many other Cloud Native tools. To foster ...

Tim Carry

Algolia DocSearch is now free for all docs sites
product

Algolia DocSearch is now free for all docs sites

TL;DR Revamp your technical documentation search experience with DocSearch! Previously only available to open-source projects, we're excited ...

Shane Afsar

Senior Engineering Manager

Looking for something?

facebookfacebooklinkedinlinkedintwittertwittermailmail

We’re very excited to announce the launch of instantsearch.js, our new library of UI widgets to help you build the best instant-search experience with Algolia’s hosted search API.

So how does this library change search?

Our mission at Algolia is to make sure any website or application has the best search experience. But we don’t want to make this only available to developers with extensive coding knowledge. Which leads us to the second part of our mission—making great search available to everyone. This is where instantsearch.js comes into play.

With this new library, we’re separating the logic and design of search, empowering developers and designers alike to create unique search experiences.

Algolia instantsearch.js

Through hundreds of search implementations, we’ve identified and developed best practices for delivering a top-notch search experience. instantsearch.js packages those best practices into a single JavaScript library of UI widgets that you can assemble and customize as you wish.

When building or adding an instant-search experience to your website, you can now think in terms of end results and how pages will look and feel, rather than having to carefully create and refine an Algolia query.

tl;dr; Using instantsearch.js, you can:

  • Build an instant-search UI faster than ever
  • Focus entirely on building the UI, forget about the complex code
  • Plug and play—everything is included in one library

How did we get here?

There are two ways to implement Algolia on the front end. The first way is with an autocompletion menu.

This kind of UI can be broken down into two elements: the text input and the search suggestions. As the user types, the search suggestion list refreshes and refines, providing the user with only the most relevant results.

Autocomplete GIF
Algolia’s autocomplete.js in action

 

The second way, what we like to refer to as instant search, is more difficult to implement as it is made up of multiple elements such as search filters, results and pagination that interact with one another. And you have to glue them together manually.

instantsearch gif
E-commerce example using Algolia’s instantsearch.js

 

We first presented this instant-search experience to our users in the form of a tutorial featuring a sample project that could be modified to fit their needs. This project was heavily based on our JavaScript helper. Unfortunately, there are several drawbacks to this kind of approach:

  • You need to fully understand the whole tutorial code.
  • You can’t easily configure individual components.
  • Once you’ve copied and pasted the code into your implementation, you won’t automatically get important updates from our engineers.

The tutorial was a solid start, but it was clearly not good enough. The JavaScript helper provided a starting point—an API that simplifies the call to the search engine—but even with all the other moving parts (JavaScript client, jQuery and jQuery plugins), there were still things missing in order to be compatible from a UI perspective.

We really needed a solution that offered much more guidance in terms of building out a great search UI. So, to overcome these limitations and make implementing instant search easier for everyone, we started working toward a more universal solution—instantsearch.js.

With instantsearch.js, we propose a simple and powerful API that allows our users to build a complete search experience simply by mapping parts of the UI to components of the instant search via a series of widgets.

Widgets are essentially the UI components that deal with either the input of the search (such as the searchBox or refinementList widgets) or the output of the search (such as the hits widget). The instantsearch.js library includes a set of core widgets, but you can also build and implement your own. Here are some custom widgets we created to inspire the community.

As with most of our projects, the instantsearch.js code is entirely open source and available on GitHub. If you’d like to contribute, please jump on in!

Ready to start building your own instant-search experience?

Get started with our instantsearch.js documentation

About the author
Alexandre Stanislawski

14-day free trial

Create a full-featured search experience in no time.

Get started
14-day free trial

Recommended Articles

Powered byAlgolia Algolia Recommend

Harnessing API’s with React: a different approach
engineering

Alexandre Stanislawski

Connectors, Docs & the Future — a Deeper Look into InstantSearch.js v2
product

Alexandre Stanislawski

Comparing Algolia and Elasticsearch for Consumer-Grade Search Part 3: Developer Experience and UX
product

Josh Dzielak