Concepts / Building Search UI / UI and UX patterns
May. 10, 2019

UI and UX Patterns

You are reading the documentation for Vue InstantSearch v2. Read our migration guide to learn how to upgrade from v1 to v2. You can still find the v1 documentation here.

Autocomplete

A common pattern in search is to implement a search box with an autocomplete as a first step of the search experience.

It might happen that you want to search across multiple indices at the same time to create federated searches experiences.

Query Suggestions

In order to help users with their search, Algolia provides a feature called query suggestions. This feature creates an index with the best queries done by the users. You can then use this index to propose suggestions to your users as they are typing into the searchBox. The great thing with this feature is that once you’ve configured the generation of the index, it’s just about querying another index and you can easily use multi-index search to for that.

Infinite Scroll

The infinite list is a very common pattern to display a list of results. Most of the times this pattern comes with two variants:

with a button to click on at the end of the list of results with a listener on the scroll event that is called when the list of results reaches the end

We will see how we can leverage the geo search capabilities of Algolia with the geoSearch widget.

Places

Algolia Places provides a fast, distributed, and easy way to use an address search autocomplete JavaScript library on your website.

OpenSearch

OpenSearch is web standard that makes browsers aware of an underlying search engine on a website. By implementing this, browsers will let the users search into your web application directly from the URL bar (in Chrome for example) or in a dedicated search input (like in Firefox).

Did you find this page helpful?