This guide provides an overview of using @appbaseio/autocomplete-suggestions-plugin with autocomplete-js.

Getting Started

The @appbaseio/autocomplete-suggestions-plugin is a Suggestions plugin that adds Query Suggestions powered by appbase-js client, to your autocomplete. It also provides rich customisations of UI supported by autocomplete-js.

Installation

Copy 
yarn add @algolia/autocomplete-js && @algolia/autocomplete-theme-classic && @appbaseio/autocomplete-suggestions-plugin
# or
npm install @algolia/autocomplete-js && @algolia/autocomplete-theme-classic && @appbaseio/autocomplete-suggestions-plugin

Basic Example

To get started, you need a container for your autocomplete to go in. If you don't have one already, you can insert one into your markup:

Copy 
<div id="autocomplete"></div>

Then, insert your autocomplete into it by calling the autocomplete function and providing the container. It can be a CSS selector or an Element.

Import the @appbaseio/autocomplete-suggestions-plugin plugin utility and create a suggestions plugin by passing appbase-js client config and the query config to fetch suggestions. Additionally, you can pass the third argument for UI customisation.

As a final step, pass this plugin to the plugins property while calling autocomplete function.

Make sure to provide a container (e.g., a div), not an input. Autocomplete generates a fully accessible search box for you.

More examples

Advanced Example

The advanced example uses two instances of the @appbaseio/autocomplete-suggestions-plugin, the first instance is configured to render the default UI that comes along, and the second instance shows the advanced usage which renders the suggestions as products listings, which when clicked, opens a new tab and takes you to the url associated with that product.

We leverage preact to render jsx elements, the same is used as a default by autocomplete-js.

The autocomplete function creates an autocomplete experience and attaches it to an element of the DOM. By default, it uses Preact 10 to render templates.

The promoted-results example demonstrate how @appbaseio/autocomplete-suggestions-plugin by-default, handles the display of promoted suggestions.

We will be using the best-buy-dataset index for this example.

Appbase.io dashboard lets you configure promoted result(s) using Query Rules. Query Rules are essentially If-This-Then-That construct - If search query contains 'Google', then promote 'Chromebook'. Query Rules serve a very specific purpose as far as search results and merchandising is concerned. When building a commercial search product, customers more often than not require commercializing the product based on certain search queries.

First step is to enable query rules in the frontend, i.e, in the appbaseClientConfig object.

Copy 
// appbase client config object
const appbaseClientConfig = {
    url: "https://appbase-demo-ansible-abxiydt-arc.searchbase.io",
    app: "best-buy-dataset",
    credentials: "b8917d239a52:82a2f609-6439-4253-a542-3697f5545947",
    settings: {
      userId: "s@s",
      enableQueryRules: true,
      recordAnalytics: true,
    },
  };

Next step is to configure the Query Rules from the backend, i.e., on our Appbase Dashboard. Refer to this guide for configuring query rules.


Category Results Example

The category-results example demonstrate how @appbaseio/autocomplete-suggestions-plugin by-default, handles the display of categorised suggestions.

We will be using the best-buy-dataset index for this example.

First step is to pass the categoryField key with a relevant category field to map the values, i.e, in the rsApiConfig object.

Read more about categoryField here.

Copy 

  // reactivesearch api configuration
  const rsApiConfig = {
   ...
   ...
   categoryField: "department.keyword"
  };