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.

Implementation Example

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