holmes

Pesquisa rápida e fácil dentro de uma página.

Holmes filtra uma lista de elementos com base no valor de uma input em apenas aproximadamente 2 KB.

Instalação

Você pode instalar o Holmes com npm ou bower sob o nome de pacote holmes.js . Para npm é assim:

$ yarn add holmes.js # or via npm

Depois disso, você pode adicioná-lo à sua página com, por exemplo, webpack, rollup, browserify ou carregar o módulo em uma tag de script diferente.

Você deve ter certeza de que possui uma regra css para a classe .hidden que oculta os elementos da maneira que desejar. Uma opção é ter isto:

. hidden {
  display : none;
}

mas pode ser qualquer css que você quiser.

Uso

demonstração

Quando devo usá-lo?

Você deve usar Holmes quando

• você tem uma quantidade limitada de itens
• você não precisa de tolerância a erros de digitação
• você só deseja adicionar uma biblioteca muito pequena
• todos os itens já estão visíveis na página

Nos casos em que você tem uma expectativa mais complicada, sugiro usar um serviço como o Algolia.

Divulgação justa: atualmente trabalho na Algolia, parece interessante? Junte-se a nós!

Exemplo simples

 holmes ( {
  input : '.search input' , // default: input[type=search]
  find : '.results div' // querySelectorAll that matches each of the results individually
} ) 

Opções

documentação completa

input

padrão : input[type=search]

querySelector para a entrada

exemplos : input , .search input

find necessário

querySelectorAll para elementos a serem pesquisados

exemplos : blockquote p , .result , .results div

class

class.hidden

padrão : hidden

Classe a ser adicionada quando a .find não contém a consulta de pesquisa.

exemplos : hidden , dn , none

class.visible

padrão : false

Classe a ser adicionada aos itens visíveis se eles contiverem a consulta de pesquisa.

exemplos : visible , vis , nohidden

placeholder

padrão : false

html para mostrar quando não houver resultados.

exemplos : <p> No results </p> , Didn't find anything.

dynamic

padrão : false

Habilite esta opção se desejar que Holmes consulte o valor de .find em cada entrada.

exemplos : true , false

instant ️ DEPRECADO

padrão : false

Esta opção está obsoleta. Para usar o Holmes em um ambiente assíncrono, inicialize-o com:

 holmes ( options ) . start ( ) ;
// or
const h = new holmes ( options ) ;
h . start ( ) ;

Dessa forma, ele iniciará imediatamente, assim como acontecia com instant: true . Desculpe pela inconveniência.

Por padrão, Holmes aguardará um evento DOMContentLoaded para iniciar a pesquisa. Se você estiver carregando os elementos por AJAX , por exemplo, esse evento chegará muito cedo. Nesse caso, você pode ativar instant e iniciar o Holmes quando seu conteúdo estiver pronto.

exemplos : true , false

minCharacters

padrão : 0

Uma quantidade mínima de caracteres precisa ser digitada antes que Holmes comece a filtrar.

exemplos : 2 , 5

mark

padrão : false

Para começar a mostrar o resultado em uma tag <mark> dentro de .find , você deve habilitar isso. Para alterar a cor em que esta match é mostrada, você deve definir o estilo da mark background-color.

❗ isso quebrará os ouvintes de eventos no conteúdo aninhado

❗ isso não funcionará se o caractere após a correspondência for literal > .

Se você realmente precisar usar esse caractere, poderá substituir todas as ocorrências de > por >

exemplos : true , false

hiddenAttr

padrão : true

Adiciona hidden="true" aos elementos ocultos. Link interessante explicando seu uso.

shouldShow

o julgamento de correspondência padrão é uma correspondência parcial do valor de entrada.

 function ( htmlText , search ) {
  return htmlText . indexOf ( search ) !== - 1 ;
}

Uma função de correspondência personalizada a ser chamada tendo como primeiro argumento o texto de um elemento e como segundo argumento o texto de entrada atual. Isso deve retornar verdadeiro se você quiser que o elemento seja exibido e falso se precisar ser oculto.

 var customMatching = function ( htmlText , search ) {
  return search . split ( / s+ / ) . every ( function ( v , i ) {
    if ( htmlText . indexOf ( v ) === - 1 ) {
      return false ;
    }
    return true ;
  } ) ;
}
holmes ( {
  shouldShow : customMatching
} )

onHidden

Retorno de chamada para quando um item está oculto.

 function ( el ) {
  console . log ( 'hide' , el ) ;
}

onVisible

Retorno de chamada para quando um item estiver visível novamente.

 function ( el ) {
  console . log ( 'show' , el ) ;
}

onEmpty

Retorno de chamada para quando nenhum item foi encontrado.

 function ( placeholder ) {
  console . log ( 'nothing found' , placeholder ) ;
}

onFound

Retorno de chamada para quando os itens são encontrados após estarem vazios.

 function ( placeholder ) {
  console . log ( 'something found' , placeholder ) ;
}

onInput

Retorno de chamada para cada entrada.

 function ( input ) {
  console . log ( 'current input' , input ) ;
} 

Métodos e membros

Para todos os métodos você deve inicializar uma nova instância do Holmes assim:

 var h = new holmes ( options ) ;

Então você pode usar os seguintes métodos:

.clear()

Você pode limpar uma entrada de Holmes programaticamente usando:

 h . clear ( ) ;

.count()

Você pode receber informações sobre quais elementos estão visíveis, ocultos e no total a qualquer momento:

 h . count ( ) ; // {all: 41, hidden: 34, visible: 7}

.start()

Inicie um ouvinte par para as opções especificadas. Holmes sempre tem .start() em execução na inicialização.

 h . start ( ) ;

.stop()

Interrompe o ouvinte de evento em execução atual. Resolve uma promessa quando esta for concluída.

 h . stop ( ) ;
h . start ( ) ; // could accidentally start too soon

h . stop ( ) . then ( h . start ) ; // might take a small time

.hidden

Há também um membro .hidden que fornece a contagem sem uma chamada de função:

 console . log ( h . hidden ) ; // 34

.elements

Uma NodeList de todos os elementos que Holmes considera. Há também .elementsLength para a quantidade de elementos e .elementsArray com uma matriz de elementos.

.input

A entrada que holmes procura. Há também a última string de pesquisa como .searchString

.placeholder

O espaço reservado atual (nó DOM).

.running

Se esta instância está ou não em execução.

.options

Mostra as opções escolhidas para esta instância de holmes. Você também pode definir opções como esta após a inicialização.

 console . log ( h . options ) ; // specified options

nota: definir opções após a execução pode exigir h.stop().then(h.start)

Vitrine

O que	Quem	imagem
bullg.it	@haroenv
família.scss	@lukyvj
wikeo.be	@bistória
Lunchbreakapp.be	@AndreasBackx

Eu adoraria saber como as pessoas usam meu projeto, me avise se quiser aparecer!

Questões?

Compatível até IE11. Para suporte de navegadores mais antigos, você precisará polyfill classList , addEventListener e o evento input com, por exemplo, remy/polyfills. Eu ainda não tentei fazer isso, então deixe-me saber o que você usou se oferecer suporte a navegadores mais antigos!

Para o IE11, você precisa polyfill Object.assign e String.includes , você pode fazer isso conforme descrito em #90

Deixe-me saber no twitter: @haroenv, ou em uma edição.

Contribuindo

Contribuições são sempre bem-vindas! Aqui estão algumas diretrizes soltas:

• usar feature branches
• não torne isso mais lento
• explique por que você deseja um recurso
• npm run doc para recriar a documentação

A construção para um UMD é feita via rollup ( npm run build ).

Mas eu não mordo, se você tiver alguma dúvida ou insegurança, me procure por exemplo no gitter.

Licença

Apache 2.0