Descarga de svelte typeahead - Descarga de código fuente svelte typeahead

svelte typeahead

Otro código fuente

v4.4.2

Descargar

esbelto-escritor

Componente de escritura anticipada de búsqueda difusa y accesible.

Este componente utiliza la biblioteca difusa liviana para búsqueda difusa del lado del cliente y sigue las pautas WAI-ARIA.

Pruébelo en Svelte REPL.

Instalación

 # npm
npm i svelte-typeahead

# pnpm
pnpm i svelte-typeahead

# Yarn
yarn add svelte-typeahead

# Bun
bun add svelte-typeahead

Uso

Básico

Pase una serie de objetos a la propiedad data . Utilice la propiedad extract para especificar el valor a buscar.

< script >
  import Typeahead from " svelte-typeahead " ;

  const data = [
    { state : " California " },
    { state : " North Carolina " },
    { state : " North Dakota " },
    { state : " South Carolina " },
    { state : " South Dakota " },
    { state : " Michigan " },
    { state : " Tennessee " },
    { state : " Nevada " },
    { state : " New Hampshire " },
    { state : " New Jersey " },
  ];

  const extract = ( item ) => item . state ;
</ script >

< Typeahead { data } { extract } />

Etiqueta personalizada

$$restProps se reenvían a svelte-search.

Utilice la propiedad label para especificar una etiqueta personalizada.

< Typeahead label = "U.S. States" { data } { extract } />

etiqueta oculta

Establezca hideLabel en true para ocultar visualmente la etiqueta.

Se recomienda configurar la label , incluso si está oculta, para accesibilidad.

< Typeahead label = "U.S. States" hideLabel { data } { extract } />

Resultados con estilo personalizado

Este componente utiliza la biblioteca difusa para resaltar caracteres coincidentes con el elemento de marca.

Utilice la ranura predeterminada para generar resultados personalizados.

< Typeahead { data } { extract } let:result let:index >
  < strong >{ @html result . string }</ strong >
  { index }
</ Typeahead >

Sin resultados

Utilice la casilla "sin resultados" para mostrar un mensaje si el valor de búsqueda no arroja resultados.

< Typeahead value = "abcd" { data } { extract } let:value >
  < svelte:fragment slot = " no-results " >
    No results found for "{ value }"
  </ svelte:fragment >
</ Typeahead >

Limitar el número de resultados.

Utilice la propiedad limit para especificar el número máximo de resultados que se mostrarán. El valor predeterminado es Infinity .

< Typeahead limit ={ 2 } { data } { extract } />

Artículos deshabilitados

Deshabilite elementos usando el filtro disable . Los elementos deshabilitados no se pueden seleccionar ni navegar mediante el teclado.

En el siguiente ejemplo, los elementos con un valor state que contiene "Carolina" están deshabilitados.

< Typeahead
  { data }
  value = " ca "
  extract ={( item ) => item . state }
  disable ={( item ) => / Carolina / . test ( item . state )}
/>

Enfocar después de seleccionar

Establezca focusAfterSelect en true para volver a enfocar la entrada de búsqueda después de seleccionar un resultado.

< Typeahead focusAfterSelect { data } { extract } />

Mostrar menú desplegable en el foco

De forma predeterminada, el menú desplegable se mostrará si el value tiene resultados.

Establezca showDropdownOnFocus en true para mostrar el menú desplegable solo cuando la entrada de búsqueda esté enfocada.

< Typeahead value = "ca" showDropdownOnFocus { data } { extract } />

Mostrar todos los resultados en foco

De forma predeterminada, no se muestran resultados si se enfoca una entrada vacía (es decir, value="" ).

Establezca showAllResultsOnFocus en true para que se muestren todos los resultados cuando se enfoca una entrada vacía.

< Typeahead showAllResultsOnFocus { data } { extract } />

Estilo

Nota: este componente tiene un estilo mínimo por diseño. Puede apuntar al componente utilizando el selector [data-svelte-typeahead] .

 : global ([ data-svelte-typeahead ]) {
  margin : 1 rem ;
}

API

Accesorios

Nombre	Tipo	Valor predeterminado	Descripción
valor	`string`	`""`	Introduzca el valor de búsqueda.
datos	`TItem[]`	`[]`	Elementos para buscar.
extracto	`(TItem) => any`	`(item) => item`	Apunte al valor si `TItem` es un objeto.
desactivar	`(TItem) => boolean`	`(item) => false`	Los elementos deshabilitados se muestran en los resultados pero no se pueden seleccionar.
filtrar	`(TItem) => boolean`	`(item) => false`	Los elementos filtrados no se mostrarán en los resultados.
selección automática	`boolean`	`true`	Ya sea para seleccionar automáticamente el primer resultado.
entradaDespués de seleccionar	`"update" \| "clear" \| "keep"`	`"update"`	Configúrelo en `"clear"` para borrar el `value` después de seleccionar un resultado. Configúrelo en `"keep"` para mantener el campo de búsqueda sin cambios después de una selección.
resultados	`FuzzyResult[]`	`[]`	Resultados difusos sin procesar del módulo difuso
centrarse después de seleccionar	`boolean`	`false`	Configúrelo en `true` para volver a enfocar la entrada después de seleccionar un resultado.
mostrarDropdownOnFocus	`boolean`	`false`	Configúrelo en `true` para mostrar resultados solo cuando la entrada esté enfocada.
mostrar todos los resultados en el enfoque	`boolean`	`false`	Configúrelo en `true` para que se muestren todos los resultados cuando se enfoca una entrada vacía.
límite	`number`	`Infinity`	Especifique el número máximo de resultados que se mostrarán.
`...$$restProps`	(reenviado a `svelte-search` )	N / A	Todos los demás accesorios se reenvían al elemento de entrada.

Eventos enviados

on:select : enviado al seleccionar un resultado
on:clear : enviado al borrar el campo de entrada

< script >
  import Typeahead from " svelte-typeahead " ;

  let e = [];
</ script >

< Typeahead
  { data }
  { extract }
  on:select ={({ detail }) => ( e = [ ... e , { event: " select " , detail }])}
  on:clear ={() => ( e = [ ... e , { event: " clear " }])}
/>

< pre >{ JSON . stringify ( e , null , 2 )}</ pre >