svelte typeahead Download - svelte typeahead download do código-fonte

svelte typeahead

Outro código-fonte

v4.4.2

Baixar

esbelto-typeahead

Componente de digitação antecipada de pesquisa difusa e acessível.

Este componente usa a biblioteca difusa leve para pesquisa difusa do lado do cliente e segue as diretrizes WAI-ARIA.

Experimente no Svelte REPL.

Instalação

 # npm
npm i svelte-typeahead

# pnpm
pnpm i svelte-typeahead

# Yarn
yarn add svelte-typeahead

# Bun
bun add svelte-typeahead

Uso

Básico

Passe uma matriz de objetos para o suporte data . Use a propriedade extract para especificar o valor a ser pesquisado.

< 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 são encaminhados para svelte-search.

Use a propriedade label para especificar um rótulo personalizado.

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

Etiqueta oculta

Defina hideLabel como true para ocultar visualmente o rótulo.

É recomendado que você defina o label – mesmo que oculto – para acessibilidade.

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

Resultados com estilo personalizado

Este componente usa a biblioteca fuzzy para destacar caracteres correspondentes ao elemento mark.

Use o slot padrão para renderizar resultados personalizados.

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

Nenhum resultado

Use o slot "sem resultados" para renderizar uma mensagem se o valor da pesquisa não produzir resultados.

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

Limite o número de resultados

Use a propriedade limit para especificar o número máximo de resultados a serem exibidos. O padrão é Infinity .

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

Itens desativados

Desative itens usando o filtro disable . Os itens desativados não são selecionáveis ou navegáveis pelo teclado.

No exemplo a seguir, os itens com valor state contendo "Carolina" estão desabilitados.

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

Foco após selecionar

Defina focusAfterSelect como true para focar novamente a entrada de pesquisa após selecionar um resultado.

< Typeahead focusAfterSelect { data } { extract } />

Mostrar menu suspenso em foco

Por padrão, o menu suspenso será mostrado se o value tiver resultados.

Defina showDropdownOnFocus como true para mostrar apenas o menu suspenso quando a entrada de pesquisa estiver em foco.

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

Mostrar todos os resultados em foco

Por padrão, nenhum resultado será mostrado se uma entrada vazia (ou seja, value="" ) estiver em foco.

Defina showAllResultsOnFocus como true para que todos os resultados sejam mostrados quando uma entrada vazia estiver em foco.

< Typeahead showAllResultsOnFocus { data } { extract } />

Estilo

Nota: este componente tem um estilo mínimo por design. Você pode direcionar o componente usando o seletor [data-svelte-typeahead] .

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

API

Adereços

Nome	Tipo	Valor padrão	Descrição
valor	`string`	`""`	Insira o valor da pesquisa.
dados	`TItem[]`	`[]`	Itens para pesquisar.
extrair	`(TItem) => any`	`(item) => item`	Defina o valor se `TItem` for um objeto.
desabilitar	`(TItem) => boolean`	`(item) => false`	Os itens desativados são mostrados nos resultados, mas não podem ser selecionados.
filtro	`(TItem) => boolean`	`(item) => false`	Os itens filtrados não serão exibidos nos resultados.
seleção automática	`boolean`	`true`	Se deve selecionar automaticamente o primeiro resultado.
inputAfterSelect	`"update" \| "clear" \| "keep"`	`"update"`	Defina como `"clear"` para limpar o `value` após selecionar um resultado. Defina como `"keep"` para manter o campo de pesquisa inalterado após uma seleção.
resultados	`FuzzyResult[]`	`[]`	Resultados difusos brutos do módulo difuso
focoDepois de selecionar	`boolean`	`false`	Defina como `true` para focar novamente a entrada após selecionar um resultado.
showDropdownOnFocus	`boolean`	`false`	Defina como `true` para mostrar resultados apenas quando a entrada estiver em foco.
mostrarTodosResultadosOnFocus	`boolean`	`false`	Defina como `true` para que todos os resultados sejam mostrados quando uma entrada vazia estiver em foco.
limite	`number`	`Infinity`	Especifique o número máximo de resultados a serem exibidos.
`...$$restProps`	(encaminhado para `svelte-search` )	N / D	Todos os outros adereços são encaminhados para o elemento de entrada.

Eventos despachados

on:select : despachado ao selecionar um resultado
on:clear : despachado ao limpar o 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 >