feat(plugins): introduce Query Suggestions plugin

[francoischalifour]

This introduces a new Autocomplete plugin: the Query Suggestions plugin.

Usage

Basic

import algoliasearch from 'algoliasearch/lite';
import { autocomplete } from '@algolia/autocomplete-js';
import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';

const searchClient = algoliasearch(
  'latency',
  '6be0576ff61c053d5f9a3225e2a90f76'
);
const querySuggestions = createQuerySuggestionsPlugin({
  searchClient,
  indexName: 'instant_search_demo_query_suggestions',
});

autocomplete({
  container: '#autocomplete',
  plugins: [querySuggestions],
});

Using with Recent Searches

import algoliasearch from 'algoliasearch/lite';
import { autocomplete } from '@algolia/autocomplete-js';
import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';

const searchClient = algoliasearch(
  'latency',
  '6be0576ff61c053d5f9a3225e2a90f76'
);

const recentSearches = createLocalStorageRecentSearchesPlugin({
  key: 'recent',
  limit: 3,
});

const querySuggestions = createQuerySuggestionsPlugin({
  searchClient,
  indexName: 'instant_search_demo_query_suggestions',
  getSearchParams() {
    // `getAlgoliaSearchParams` adds `facetFilters` to dedupe items from Recent Searches,
    // as well as gets the right `hitsPerPage` after deduping.
    return recentSearches.data.getAlgoliaSearchParams({
      hitsPerPage: 5
    });
  },
});

autocomplete({
  container: '#autocomplete',
  openOnFocus: true,
  plugins: [recentSearches, querySuggestions],
});

Changes

• Since it now makes sense to entirely rely on plugins, the getSources function becomes optional
• The two data function from Recent Searches are now gathered in getAlgoliaSearchParams (see example above)

Next steps

• Think about a Requester API that allows to batch all Algolia queries from plugins in a single network request
• Gather use cases with AlexC to see if we should support Query Suggestions Categories in our plugin

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 706245b:

Sandbox	Source
@algolia/js-example	Configuration

[Haroenv]

super cool wrapping!

[Haroenv]

the main example should probably still show results as well as query suggestions, to show more of the full api, wdyt?

[francoischalifour]

Yeah eventually we'll have examples in other places, that's used for dev only for now—so not too much of a deal!

[Haroenv]

add some info here to link to the query suggestions feature?

[francoischalifour]

Yep, we'll work on an exhaustive doc with Maria so we'll wait for this content before changing this doc multiple times if you don't mind.

[Haroenv]

How do you deduplicate searches between multiple query suggestion sources / regular hits?

[francoischalifour]

@Haroenv Right now we only duplicate RS/QS when provided explicitly with getAlgoliaSearchParams. AlexC and I are starting to think about the concept of grouping/combining to dedup between sources—so that'll be a future API! (And I'm open to ideas!)

[Haroenv]

I thought it would be better to have a more complete readme that can be changed later; the code sample would most likely stay the same, and in the mean time it wouldn't be as straightforward to use this in an app, but I understand not wanting to rewrite I guess

[eunjae-lee]

Looks good to me. A good addition!