search-ui-azure-connector

This connector is used to connect Search UI to Azure Cognitive Search.

Getting started

Install React Search UI and the Azure Cognitive Search connector.

npm install --save @elastic/react-search-ui search-ui-azure-connector

import { AzureCognitiveSearchConnector } from "search-ui-azure-connector";

// We'll connect to the Azure Cognitive Search public sandbox and send a query
// to its "nycjobs" index built from a public dataset of available jobs in New York
// https://www.npmjs.com/package/@azure/search-documents#send-your-first-search-query
const connector = new AzureCognitiveSearchConnector({
  endpoint: "https://azs-playground.search.windows.net/",
  queryKey: "252044BE3886FE4A8E3BAA4F595114BB",
  indexName: "nycjobs",
});

<SearchProvider
  config={{
    apiConnector: connector,
  }}
>
  <div className="App">{/* Place Components here! */}</div>
</SearchProvider>;

If you would like to connect to your own Azure Cognitive Search instance, make sure to use the query key and not the admin key.

Configuration

All configuration for Search UI is provided in a single configuration object, as documented here.

This connector supports the configuration possibilities of Search UI for filters, facets, autocomplete and suggestions. Specific Azure Cognitive Search configuration possibilities are documented below.

Set custom suggester

By default, the connector uses sg as the suggester name for autocomplete and suggestions. If you want to specify a custom suggester name, add the suggester property to the results and/or suggestions config.

{
  "autocompleteQuery": {
    "results": {
      "suggester": "sg"
    },
    "suggestions": {
      "suggester": "sg"
    }
  }
}

Set Autocomplete Mode

TODO

If you specify fields in result_fields, make sure they exist in your suggester.

Sample

A sample using the more advanced features of Search UI can be found here, built via Create React App. Checkout the live demo of Search UI with Azure Cognitive Search.