Skip to main content

Autocomplete

Create a full-featured search experience by integrating Glean's Autocomplete and Search Results components. This approach enables deep UI customization while maintaining straightforward implementation.

Autocomplete Interface Search Results Interface

Implementation Guide​

Adding the JavaScript Client​

Include the JavaScript library in your page's <head> section. Replace GLEAN_APP_DOMAIN with your company's Glean web app domain (typically app.glean.com or your-company.glean.com for custom subdomains).

info

The Glean web app domain differs from your company's Glean backend domain (which typically follows the format your-company-be.glean.com).

<script
    defer
    src="https://{GLEAN_APP_DOMAIN}/embedded-search-latest.min.js"
  ></script>

Component Setup​

The implementation requires two container elements with specific CSS properties and event handling to coordinate the search experience:

  1. Create container elements with the following CSS properties:

    • position: relative
    • display: block
    • Appropriate sizing and positioning

  2. Implement the search functionality with event handling:

let currentQuery;

function renderSearchResults() {
  const resultsElement = this.template.querySelector('search-results');
  window.GleanWebSDK.renderSearchResults(resultsElement, {
    onSearch: (query) => {
      currentQuery = query;
      renderSearchBox();
    },
    query: currentQuery
  });
}

function renderSearchBox() {
  const autocompleteElement = this.template.querySelector('search-box');
  window.GleanWebSDK.renderSearchBox(autocompleteElement, {
    onSearch: (query) => {
      currentQuery = query;
      renderSearchResults();
    },
    query: currentQuery
  });
}

renderSearchBox();

Customization Options​

Component APIs​

The implementation provides extensive customization options through two primary APIs:

Theming​

Customize the appearance using SearchBoxCustomizations. The theming system is regularly expanded with additional options based on customer needs.

Authentication​

note

Authentication involves two default steps that users must complete upon first usage. However, both steps can be optimized for a smoother user experience.

Default Authentication Flow​

  1. Email Address Entry
  2. SSO Authentication

Optimizing Authentication​

You can streamline the authentication process in two ways:

  1. Skip Email Entry: Implement the backend parameter to bypass the email entry step.

  2. Skip SSO Authentication: Configure a server-to-server handshake and provide the user's auth token via Options.authToken.

warning

When implementing auth token authentication:

  • You must configure an onAuthTokenRequired callback
  • This callback handles token refresh when expiration approaches
  • Server-to-server authentication becomes mandatory if third-party cookies are blocked in the user's browser

Implementation Example​

View a complete working implementation of the Autocomplete with Search components in our interactive demo: