Search

The search configuration provides settings for all search-related components, including search behavior, appearance, and functionality. These settings allow you to customize how users interact with the search interface, how results are displayed, and how the search behavior works.

Basic Configuration

// Basic search configuration
const searchSettings: InkeepSearchSettings = {
  placeholder: "Search documentation...",
  defaultQuery: "",
  maxResults: 40,
  debounceTimeMs: 300,
  shouldOpenLinksInNewTab: true,
  shouldAutoFocusInput: true,
};
 
// Advanced configuration with analytics and customization
const searchSettings: InkeepSearchSettings = {
  placeholder: "Search our docs, GitHub, and community...",
  defaultQuery: new URLSearchParams(window.location.search).get("q") || "",
  maxResults: 50,
  debounceTimeMs: 250,
  shouldOpenLinksInNewTab: true,
  searchQueryParamKey: "search",
  onQueryChange: (query) => {
    analytics.track("search_query", { query });
    updateURLParams(query);
  },
  tabs: ["Publications", ["GitHub", { isAlwaysVisible: true }], "Forums"],
};

Core Settings

Configure basic search behavior and appearance:

Option	Type	Default	Description
`placeholder`	`string`	`'Search anything...'` (desktop), `'Search'` (mobile)	Text shown in empty search input
`defaultQuery`	`string`	`''`	Initial search query on load
`maxResults`	`number`	`40`	Maximum number of results to show
`debounceTimeMs`	`number`	`0`	Milliseconds to wait before searching
`shouldOpenLinksInNewTab`	`boolean`	`false`	Open results in new tab
`searchQueryParamKey`	`string`	`null`	URL parameter for search query; gets appended to the URL when a result is clicked
`view`	`"single-pane" \| "dual-pane"`	`"single-pane"`	Whether to render the search results in a single list or a two pane view with a list of results on the left and a preview of the content on the right

const searchSettings: InkeepSearchSettings = {
  // ...
  placeholder: "Search documentation...",
  defaultQuery: "",
  maxResults: 40,
  debounceTimeMs: 300,
  shouldOpenLinksInNewTab: true,
  searchQueryParamKey: "q",
};

Search Tabs

Configure result categorization and organization:

interface SearchTab {
  [0]: string;
  [1]: {
    isAlwaysVisible?: boolean;
  };
}

Option	Type	Required	Description
`tabs`	`(string \| SearchTab)[]`	No	Tabs to display in results

The tabs feature supports several configuration patterns:

const searchSettings: InkeepSearchSettings = {
  // Basic tabs
  tabs: ["All", "Publications", "GitHub", "Forums"],
 
  // With always visible option
  tabs: [
    "All",
    "Publications",
    ["GitHub", { isAlwaysVisible: true }],
    "Forums",
  ],
 
  // Hide "All" tab, show only Publications and GitHub
  tabs: ["Publications", "GitHub"],
 
  // No tabs (just show all results)
  tabs: [],
};

Default tabs if none provided:

All
Publications
PDFs
GitHub
Forums
Discord
Slack
StackOverflow

The tabs are displayed in the order they are provided in the tabs array.

Event Handling

Configure search event callbacks:

Option	Type	Required	Description
`onQueryChange`	`(query: string) => void`	No	Called when search query changes

const searchSettings: InkeepSearchSettings = {
  // ...
  onQueryChange: (query) => {
    // Maybe Update URL
    const url = new URL(window.location.href);
    url.searchParams.set("q", query);
    window.history.replaceState({}, "", url);
  },
};

Basic Configuration

Core Settings

Search Tabs

Event Handling

On this page