Boltdocs Logo
GuíasIntegracionesAPIPluginsComponentesLanzamientos

FlexSearch

Boltdocs incluye **FlexSearch** como su motor de búsqueda offline predeterminado. Durante la fase de compilación, Boltdocs escanea todos los archivos markdown y prepara un asset de búsqueda runtime limitado. El cliente carga el asset y FlexSearch de forma lazy cuando se abre el diálogo, y realiza coincidencias locales de alta velocidad sin consultas de red.

El Hook useSearch()Link

Para construir una barra de búsqueda personalizada, entradas de consulta o búsqueda en lista en línea, usa el hook useSearch() de boltdocs. Expone el estado de consulta en vivo, los resultados de búsqueda y los callbacks de control del diálogo.

tsx
import { useRoutes, useSearch } from 'boltdocs'

export function MySearchBar() {
  const { routes } = useRoutes()
  const {
    query,
    setQuery,
    list,
    isOpen,
    setIsOpen,
    handleSelect,
    status,
  } = useSearch(routes)

  return (
    <div className="search-container">
      <input
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        placeholder="Type to search..."
        onFocus={() => setIsOpen(true)}
      />
      {isOpen && status === 'ready' && list.length > 0 && (
        <div className="search-dropdown">
          {list.map((result) => (
            <button
              key={result.id}
              type="button"
              className="search-item"
              onClick={() => handleSelect(result.path)}
            >
              <span className="search-title">{result.title}</span>
              <p className="search-desc">{result.snippet ?? result.bio}</p>
            </button>
          ))}
        </div>
      )}
    </div>
  )
}

SearchResultLink

PropiedadTipoDescripción
idstringIdentificador estable del resultado.
pathstringLa ruta absoluta resuelta (por ejemplo '/docs/guides/getting-started').
titlestringEl título de la página o encabezado que coincide.
biostringEl breadcrumb de la página o encabezado.
snippetstring | undefinedUn excerpt enfocado alrededor de la coincidencia, cuando está disponible.
isHeadingbooleanSi el resultado apunta a un ancla de encabezado.

Desarrollo Local vs. ProducciónLink

  • Desarrollo Local: El índice de búsqueda se actualiza incrementalmente mediante Vite HMR a medida que editas archivos, haciendo que las pruebas de cambios de búsqueda en vivo sean fluidas.
  • Producción: El asset de búsqueda limitado y el motor FlexSearch se cargan de forma asíncrona solo cuando el usuario interactúa con la entrada de búsqueda, manteniendo pequeño el bundle inicial. Los resultados se filtran por la locale y la versión activas antes de aplicar el límite.
Jesús Alcalá
Last updated on October 18, 2026

Was this page helpful?