Boltdocs Logo
GuíasIntegracionesAPIPluginsComponentes
  1. Home
  2. ChevronRightBúsqueda
  3. ChevronRightFlexSearch

FlexSearch

Boltdocs incluye **FlexSearch** como su motor de búsqueda offline predeterminado. Durante la fase de compilación, Boltdocs escanea todos los archivos markdown, parsea su HTML/encabezados y compila un archivo JSON de índice altamente comprimido. El runtime del lado del cliente carga este índice 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.

import { useSearch } from 'boltdocs'

export function MySearchBar() {
  const { query, setQuery, results, isOpen, open, close } = useSearch()

  return (
    <div className="search-container">
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Type to search..."
        onFocus={open}
      />
      {isOpen && results.length > 0 && (
        <div className="search-dropdown">
          {results.map((result) => (
            <a key={result.path} href={result.path} className="search-item">
              <span className="search-title">{result.title}</span>
              <p className="search-desc">{result.description}</p>
            </a>
          ))}
        </div>
      )}
    </div>
  )
}

Referencia de APILink

Valores de Retorno de useSearch()Link

PropiedadTipoDescripción
querystringLa consulta de texto de búsqueda activa.
setQuery(q: string) => voidActualiza la cadena de búsqueda y consulta el índice offline de FlexSearch.
resultsSearchResult[]Arreglo de rutas de páginas coincidentes, ordenadas por puntuación de relevancia.
isOpenbooleantrue si el modal de búsqueda está actualmente abierto.
open() => voidAbre el estado del modal de búsqueda.
close() => voidCierra el estado del modal de búsqueda y restablece la cadena de consulta.

SearchResultLink

PropiedadTipoDescripción
pathstringLa ruta absoluta resuelta (por ejemplo '/docs/guides/getting-started').
titlestringEl título de la página que coincide.
descriptionstringLa descripción de la página (del frontmatter o extracto).
headingsHeadingMatch[]Sub-encabezados (h2–h6) dentro de la página que coincidieron con la consulta de búsqueda.

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 índice se empaqueta en un paquete separado con división de chunks que se carga de forma asíncrona solo cuando el usuario interactúa con la entrada de búsqueda, manteniendo el tamaño de carga inicial del paquete extremadamente mínimo.
Last updated on July 27, 2026

Was this page helpful?