Implementation:TobikoData Sqlmesh SearchList

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Search, User_Input
Last Updated	2026-02-07 20:00 GMT

Overview

A reusable React component providing autocomplete search functionality with keyboard navigation and customizable display options.

Description

SearchList is a generic TypeScript React component that enables users to search through lists of items with real-time filtering, keyboard navigation support, and a popover-based results interface. The component uses Headless UI for accessible popover behavior and supports both selection callbacks and navigation routing for result handling. It includes debounced search, highlighted match display, and flexible configuration for various use cases throughout the SQLMesh web UI.

Key features include arrow key navigation through results, customizable display properties, optional index highlighting, and full keyboard accessibility with Escape key support for dismissing results.

Usage

Use this component when you need searchable dropdowns or autocomplete functionality in the SQLMesh web UI. Common use cases include model name searches, environment selectors, and file path lookups where users need to quickly filter and select from large lists.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/components/search/SearchList.tsx

Signature

export default function SearchList<
  T extends Record<string, any> = Record<string, any>,
>({
  list,
  size,
  searchBy,
  displayBy,
  descriptionBy,
  onSelect,
  to,
  placeholder,
  autoFocus,
  showIndex,
  isFullWidth,
  isLoading,
  disabled,
  direction,
  className,
  onInput,
}: {
  list: T[]
  searchBy: string
  displayBy: string
  descriptionBy?: string
  placeholder?: string
  onSelect?: (item: T) => void
  autoFocus?: boolean
  showIndex?: boolean
  to?: (item: T) => string
  size?: Size
  direction?: 'top' | 'bottom'
  className?: string
  isFullWidth?: boolean
  isLoading?: boolean
  disabled?: boolean
  onInput?: (value: string) => void
}): JSX.Element

Import

import SearchList from '@components/search/SearchList'

I/O Contract

Inputs

Name	Type	Required	Description
list	T[]	Yes	Array of items to search through
searchBy	string	Yes	Property name to use for filtering items
displayBy	string	Yes	Property name to display as main text
descriptionBy	string	No	Optional property name for secondary description text
onSelect	(item: T) => void	No	Callback function when item is selected
to	(item: T) => string	No	Navigation function returning route path
placeholder	string	No	Input placeholder text (default: "Search")
size	Size	No	Component size (sm/md/lg)
autoFocus	boolean	No	Whether input should autofocus (default: false)
showIndex	boolean	No	Show search index text (default: true)
isFullWidth	boolean	No	Expand results to full width (default: false)
isLoading	boolean	No	Show loading state (default: false)
disabled	boolean	No	Disable input and selection (default: false)
direction	'bottom'	No	Popover direction (default: 'bottom')
className	string	No	Additional CSS classes
onInput	(value: string) => void	No	Callback when search input changes

Outputs

Name	Type	Description
JSX.Element	React Component	Rendered search list component with popover results

Usage Examples

// Basic search with selection callback
<SearchList
  list={models}
  searchBy="name"
  displayBy="displayName"
  descriptionBy="type"
  placeholder="Search models..."
  onSelect={(model) => {
    console.log('Selected:', model)
  }}
/>

// Search with navigation
<SearchList
  list={environments}
  searchBy="name"
  displayBy="name"
  to={(env) => `/plan/environments/${env.name}`}
  size={EnumSize.md}
  autoFocus={true}
/>

// Full-width search with loading state
<SearchList
  list={files}
  searchBy="path"
  displayBy="name"
  descriptionBy="path"
  isFullWidth={true}
  isLoading={isLoadingFiles}
  showIndex={false}
  onInput={(value) => {
    // Trigger async search
    debouncedSearch(value)
  }}
/>

// Disabled search with custom styling
<SearchList
  list={items}
  searchBy="id"
  displayBy="label"
  disabled={!hasPermission}
  direction="top"
  className="my-4"
/>

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment