connectors connectAutocomplete

Edit this page

Description

Autocomplete connector provides the logic to build a widget that will give the user the ability to search into multiple indices.

This connector provides a refine() function to search for a query and a currentRefinement as the current query used to search.

THere’s a complete example available on how to write a custom Autocomplete widget: autocomplete.js

Usage

Usage
const search= instantsearch(/* parameters */);

const makeAutocomplete= instantsearch.connectors.connectAutocomplete(
function renderFn(
renderOpts: AutocompleteRenderingOptions,
isFirstRendering: boolean) {
// render the custom Autocomplete widget
} );

const customAutocomplete = makeAutocomplete(instanceOpts: CustomAutocompleteWidgetOptions);
search.addWidget(customAutocomplete);

Connector options

AutocompleteRenderingOptions

  • indicesArray<Index>

    The indices you provided with their hits and results and the main index as first position.

  • refine(string) => undefined

    Search into the indices with the query provided.

  • currentRefinementstring

    The actual value of the query.

  • widgetParamsObject

    All original widget options forwarded to the renderFn.

Index

  • indexstring

    Name of the index.

  • labelstring

    Label of the index (for display purpose).

  • hitsArray<Object>

    The hits resolved from the index matching the query.

  • resultsObject

    The full results object from Algolia API.

CustomAutocompleteWidgetOptions

  • indices[Array<{value: string, label: string}>]
    Default value: []

    Name of the others indices to search into.

  • escapeHits[boolean]
    Default value: false

    If true, escape HTML tags from hits[i]._highlightResult.


Can't find what you are looking for? Open an issue, we'll get back to you.