search-ui-azure-connector

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.

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

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.

Limitations

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

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