Skip to main content
A federated search offers recent searches, popular searches, search results, and other content from multiple indices in a single interface. The following example shows how to combine multiple indices using Autocomplete with a two-column layout.
  • Desktop
  • Mobile
Advanced federated search experience for ecommerce (on desktop)
View demoExplore source code

​
Understand the user interface

This example’s user interface consists of three search states, each one containing different plugins.
Search statePlugins
Empty query• Recent searches
• Popular searches
• Quick access
Results• Product Query Suggestions
• Product category suggestions
• Product brand suggestions
• FAQ suggestions
• Products preview
• Articles preview
No results• No results message
• Popular category suggestions

​
Empty query state

The empty query state describes what users see in the search box before typing a search query. This example provides some recent and popular searches on the left (1 and 2) and quick access items on the right (3). Empty query state

​
Recent searches

The autocomplete-plugin-recent-searches plugin fetches and then saves recent searches on the user’s local storage. If there aren’t any recent searches, the recent searches section is hidden. A maximum of 4 recent searches are displayed by default. To customize the plugin options, edit the recentSearchesPlugin file. The autocomplete-plugin-query-suggestions plugin retrieves hits from the Query Suggestions index. The first 6 most popular query suggestions are displayed. By default, query suggestions are sorted by the popularity attribute in descending order (most popular first). To customize the plugin options, edit the popularPlugin file.

​
Quick access

Quick access is a custom plugin that retrieves the JSON data from the response coming from a Rule configured in the Algolia dashboard on the products index. The rule is triggered by a rule context defined in the Autocomplete plugin. The example uses four item templates: sales-banner, sales-code, new-collection, and help. 
{
  "template": "sales-banner",
  "title": "Spring Sale",
  "subtitle": "up to 60% Off",
  "image": "https://res.cloudinary.com/hilnmyskv/image/upload/v1645453369/sales_banner_y1hsr8.jpg",
  "href": "#"
}
Customize them or create a new template by using a new item’s template value in the custom JSON data of the Rule and style it as you wish in the CSS file. This is the rule’s custom JSON data structure:
JSON
{
  "items": [/* Array of template items */]
}
To customize the plugin, edit the quickAccessPlugin file. The complete rule configuration is in the products_configuration.json file.

​
Results search state

The results search state appears as soon as you start typing a query in the search box. It provides multiple suggestions on the left and a preview of relevant products and articles on the right. The suggestions are combined using the Autocomplete Reshape API following two rules:
  • Suggestions are deduplicated between sources.
  • A maximum of 1 category, 2 brands, and 1 FAQ are displayed. The rest is filled up with query suggestions to reach a total of 10 suggestions on desktop and 6 suggestions on mobile.
This layout provides users with what they’re looking for (however they may approach their search) while maximizing the display on any device. Results search state

​
Key

  1. Product query suggestions
  2. Product category suggestions
  3. Product brand suggestions
  4. FAQ suggestions
  5. Products preview
  6. Articles preview

​
Product Query Suggestions

The autocomplete-plugin-query-suggestions plugin retrieves hits matching the query from the product Query Suggestions index. A maximum of 10 product query suggestions are displayed by default. To customize the plugin options, edit the querySuggestionsPlugin file.
Index records and configuration

​
Product category suggestions

Product category suggestions is a custom plugin that retrieves the category of the first matching product from the products index. A maximum of 1 product category is displayed by default. To customize the plugin, edit the categoriesPlugin file.

​
Product brand suggestions

Product brand suggestions is a custom plugin that retrieves the product brands facet values matching the query from the products index. A maximum of 2 product brands are displayed by default. To customize the plugin, edit the brandsPlugin file.

​
FAQ suggestions

FAQ suggestions is a custom plugin that retrieves an FAQ matching the query from the FAQ index. A maximum of 1 FAQ is displayed by default. To customize the plugin, edit the faqPlugin file. The index records are in the faq.json file.
Sample FAQ record
JSON
{
  "objectID": "5",
  "title": "Shipping methods/delays",
  "list_categories": ["shipping", "international"]
}

​
Products preview

Products preview is a custom plugin that retrieves products matching the query and displays a preview (including image, brand, name, price, and review rating/count) from the products index. A See All button that lists the number of other matching products (if any) is also displayed. A maximum of 4 product previews are displayed by default. To customize the plugin, edit the productsPlugin file.
Index records and configuration
Simplified sample record
JSON
{
  "objectID": "M0E20000000DG2H",
  "name": "Dress Sun68 grey",
  "brand": "Sun 68",
  "image_blurred": "LbR:7=t7_4M{IUof%MWBxuWBRPt7",
  "image_urls": [
    "https://res.cloudinary.com/hilnmyskv/image/upload/v1638371844/flagship_sunrise/M0E20000000DG2H_0.jpg",
    "https://res.cloudinary.com/hilnmyskv/image/upload/v1638371845/flagship_sunrise/M0E20000000DG2H_1.jpg",
    "https://res.cloudinary.com/hilnmyskv/image/upload/v1638371846/flagship_sunrise/M0E20000000DG2H_2.jpg"
  ],
  "price": {
    "currency": "EUR",
    "discount_level": -100,
    "discounted_value": 0,
    "on_sales": false,
    "value": 100
  },
  "reviews": {
    "bayesian_avg": 3.957894736842105,
    "count": 94,
    "rating": 4
  }
}

​
Articles preview

Articles preview is a custom plugin that retrieves articles matching the query from the articles index. A See All button that lists the number of other matching articles (if any) is also displayed. A maximum of 2 article previews are displayed by default. To customize the plugin, edit the articlesPlugin file.
Index records
Sample record
JSON
{
  "objectID": "98",
  "title": "Victoria Beckham - New collection 2021",
  "image_url": "https://media.istockphoto.com/photos/stacked-and-ready-to-be-packed-picture-id1286024201?b=1&k=20&m=1286024201&s=170x170",
  "date": "2021-03-31T22:00:00.000Z"
}

​
No results search state

The no results search state is displayed when no results matching are found for the current query. It provides some advice on the left and popular categories on the right. No results search state

​
No results message

To customize the no results message, edit the render method in the app.tsx file. Popular category suggestions is a custom plugin that retrieves facet values for categories with the most number of products from the products index. Image URLs are hard-coded for the first 6 categories. To customize the plugin, edit the popularCategoriesPlugin file.

​
Technical requirements

​
Dependencies

The example has multiple dependencies:

​
Structure

The folder structure of the example is as follows:

​
Combine different data sources

This example uses multiple Algolia indices hosted on Algolia’s latency application. If you intend to use your own Algolia indices or change the existing ones, the datasets and configurations are provided as JSON files in the Algolia datasets repository and described below.

​
Products index

This index contains fashion products.

​
Product Query Suggestions index

This index contains Query Suggestions for products.

​
Articles index

This index contains articles related to some product brands.

​
FAQ index

This index contains frequently asked questions.
⌘I