This connector is used to connect Search UI to Azure Cognitive Search. Checkout the live demo of Search UI with Azure Cognitive Search, or have a look at the React sample.

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.

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.

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"
    }
  }
}

The Autocomplete API supports three different modes. The default mode is oneTerm. You can add the autocompleteMode property to the results config, to change the Autocomplete Mode.

{
  "autocompleteQuery": {
    "results": {
      "autocompleteMode": "twoTerms" // oneTerm, twoTerms or oneTermWithContext
    }
  }
}

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

This connector does not support all the functionality offered by Search UI. The following features are not (yet) supported.

• Facet search
• autocompleteQuery does not take results per page into account
• Search UI doesn't offer a 'detail page' currently, just the search overview

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 or have a look at the code sandbox.