Skip to main content

Search Box + Results

Compose a full search experience from two coordinated components: an autocomplete search box (renderSearchBox) and a tabbed results page (renderSearchResults). This approach gives you the deepest UI control — you own the page layout, Glean renders the search surfaces.

portal.sample.internal/search
payments
CPayments Service — Deploy & Rollback RunbookEngineering Wiki · Updated 2 days ago
Gpayments-servicegit.internal/payments-service · 1mo ago
from:teammate
type:bug, document, message, etc.
⏎ Enter Search
All filtersFrom: meUpdated
AllCGSJ
C
Payments Service — Deploy & Rollback RunbookPriya Natarajan · Updated 2 days ago · Engineering WikiCanary the payments service behind the feature gate, then promote once error rates hold under 0.1% for 15 minutes…
G
payments-serviceRepository · 42 open pull requestsOwns charge creation, refunds, and ledger writes. See the runbook before deploying to production…
S
#payments-oncall — canary alarm follow-upMarcus Webb · YesterdayThe alarm cleared after we rolled back — updating the runbook with the new dashboard links…

Illustrative previewRendered with sample data — in your app, this component renders live against your organization's Glean instance.

Install the SDK​

npm install @gleanwork/web-sdk

Render the search page​

  1. Create two container elements — one for the search box, one for results — each with position: relative, display: block, and appropriate sizing.
Sizing the search box container

The search box fills its container (minus any margins from searchBoxCustomizations), so size the container to the box itself — around 50–90px tall — not to the dropdown. The autocomplete dropdown renders below the box and extends past the container's bounds, so make sure no ancestor clips it with overflow: hidden, and give the search box container a higher z-index than the content beneath it so the dropdown overlays that content instead of rendering behind it.

  1. Render both components, and connect them through their onSearch callbacks so a query typed in the box re-renders the results:
import { renderSearchBox, renderSearchResults } from '@gleanwork/web-sdk';

const boxElement = document.getElementById('search-box');
const resultsElement = document.getElementById('search-results');

let currentQuery = '';

function onSearch(query) {
  currentQuery = query;
  renderAll();
}

function renderAll() {
  renderSearchBox(boxElement, { onSearch, query: currentQuery });
  renderSearchResults(resultsElement, { onSearch, query: currentQuery });
}

renderAll();

In a real app you would typically also update the page URL from onSearch so searches are linkable and the back button works.

Options​

The search box accepts SearchBoxOptions and the results page accepts TabbedSearchOptions. Commonly used options:

OptionApplies toTypeDescription
onSearchBoth(query) => voidRequired. Invoked when the user performs a search.
queryBothstringThe query text to perform/display.
autofocusSearch boxbooleanFocus the box when it first renders. Defaults to false.
searchBoxCustomizationsSearch boxSearchBoxCustomizationsPlaceholder text, font size, icon, borders, and margins.
hideAutocompleteSearch boxbooleanSuppress the autocomplete dropdown.
datasourcesFilterBothstring[]Restrict results to specific datasources, e.g. ['jira', 'confluence'].
filtersBothFilterValue[]Pinned, non-modifiable filters applied to every search.
showInlineSearchBoxResultsbooleanRender a search box inline above the results.
autoExpandResultsbooleanGrow the results frame to fit content instead of scrolling internally.
hideFiltersColumnResultsbooleanHide the righthand filter column.
onDatasourceChangeResults(datasource) => voidInvoked when the user switches result tabs.

All components also accept the common Options — backend, authToken, theme, themeVariant, locale, and more.

Theming​

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