svelte search

búsqueda esbelta

Componente de búsqueda Svelte accesible y personalizable.

Este componente de búsqueda se compone de form semántica y elementos input .

Consulte svelte-typeahead para ver un componente de búsqueda con resultados desplegables.

Pruébelo en Svelte REPL.

---

Instalación

 # npm
npm i svelte-search

# pnpm
pnpm i svelte-search

# Yarn
yarn add svelte-search

# Bun
bun add svelte-search

Estilo

Este componente no tiene estilo por diseño. Apunte al componente utilizando el selector [data-svelte-search] .

 : global ([ data-svelte-search ] input ) {
  width : 100 % ;
  font-size : 1 rem ;
  padding : 0.5 rem ;
  margin : 0.5 rem 0 ;
  border : 1 px solid # e0e0e0 ;
  border-radius : 0.25 rem ;
}

Uso

Encuadernación bidireccional

< script >
  import Search from " svelte-search " ;

  let value = " " ;
</ script >

< Search bind:value />

{ #if value }
  < button on:click ={() => ( value = " " )}>Clear "{ value }"</ button >
{ /if }

en: enviar

El elemento input está contenido en un form . Utilice el evento submit reenviado para obtener el valor al presionar "Entrar".

< Search bind:value on:submit ={() => console . log ( " submit " , value )} />

Etiqueta con texto de marcador de posición

$$restProps se reenvían al elemento de entrada.

< Search label = " My label " placeholder = " Placeholder text... " />

Ranura para etiquetas

< Search >
  < span slot = " label " style = " color: red; " >Custom label</ span >
</ Search >

Etiqueta visualmente oculta

Establezca hideLabel en true para ocultar visualmente la etiqueta.

< Search hideLabel label = " My label " placeholder = " Placeholder text... " />

Enfoque (declarativo)

Utilice el accesorio autofocus para enfocar la entrada de forma declarativa.

< Search autofocus />

Enfoque (programático)

Vincule el accesorio ref para enfocar la entrada mediante programación.

< script >
  import Search from " svelte-search " ;

  let ref = null ;
</ script >

< Search bind:ref />

< button on:click ={() => ref . focus ()}>Focus</ button >

Entrada rebotada

Utilice la propiedad debounce para especificar el valor de antirrebote en milisegundos.

< script >
  import Search from " svelte-search " ;

  let events = [];
</ script >

< Search
  debounce ={ 800 }
  on:type ={({ detail : value }) => ( events = [ ... events , value ])}
/>

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

API

$$restProps se reenvían al elemento de entrada.

Accesorios

Nombre del accesorio	Tipo	Valor predeterminado
valor	string	""
etiqueta	string	"Search"
ocultarEtiqueta	boolean	false
rebote	number	0
árbitro	HTMLInputElement	null
identificación	string	"search" + Math.random().toString(36)
eliminar los atributos de FormAria	boolean	false
enfoque automático	boolean	false

Eventos reenviados

• en: entrada
• en: cambiar
• en: enviar
• en: centrarse
• en: desenfoque
• en: pulsación de tecla

Eventos enviados

• on:type : se activa cuando se actualiza el valor de entrada
• on:clear : se activa al hacer clic en el botón "X" para borrar el valor de entrada

< Search
  on:type ={( e ) => {
    console . log ( " type " , e . detail ); // input value
  }}
  on:clear ={() => {
    console . log ( " clear " );
  }}
/>

Registro de cambios

Registro de cambios

Licencia

MIT