Coloque a classe ui_filter no campo de texto que irá filtrar o resultado
Coloque a classe ui_filterItem em cada item da lista dos resultados e ui_filterItens no elemento que envolverá todos os itens
Essa lista pode ser uma tabela (<table>), lista simples (<ul>), um conjunto de parágrafos (<p>), um conjunto de contâiners (<div>), etc.
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
Use no campo de texto o atributo data-label para alterar o rótulo do inicial do campo
Informe o valor que desejar, exemplo: data-label="Digite um termo"
Também é possível usar o atributo data-no-result no campo de texto para alterar o texto quando não houver resultado
Informe o valor que desejar, exemplo: data-no-result="Resultado não encontrado"
Ainda no campo de texto, use no campo de texto o atributo data-show-reset-button="true" para inserir um botão para limpar o campo de busca
Use o atributo data-show-count no mesmo campo de texto para informar o elemento html que receberá o número de resultados encontrados
Informe o seletor do elemento html, exemplo: data-show-count=".foo" ou data-show-count="#foo"
Caso necessário, use o atributo data-show-count-pattern="Resultado vazio|1 resultado|{x} resultados". para alterar as frases padrões de data-show-count.
A função também conta com o uso de tags em cada ui_filterItem para ampliar o seu significado e a possibilidades de encontrá-lo.
Para isso, use o atributo data-tags e informe o texto e/ou palavras-chave que serão indexados à pesquisa
Para aumentar a transparência da consulta, o texto de data-tags será adicionado ao resultado de .ui_filterItem que ele faz parte. Portanto, ele se tornará visível para o leitor.
Atenção: Em alguns casos específicos, o texto de data-tags não será adicionado ao .ui_filterItem. Isso está programado para não escrever em tags que não suportam texto, como <tr> ou <ul>.
Também é possível excluir trechos do texto a ser pesquisado.
Para isso, dentro do .ui_filterItem, envolva os trechos que serão excluídos da indexação em classes ui_filterItemIgnore
Exemplo: <div class="ui_filterItem">lorem ipsum <span class="ui_filterItemIgnore">trecho ignorado</span> dolor sit amet</div>
Se necessário, use o atributo data-html="true" para que a função confronte o html do conteúdo ao invés do seu texto.
Dessa forma, será possível buscar textos alternativos (alt), títulos (title), comentários ou outros conteúdos invisíveis.
Atenção: A função está preparada para não consultar outros atributos não indexáveis, como href, src, value, class, id, style, data-* e etc.
Usuários avançados podem criar funções quando o filtro estiver pronto
Para isso, crie a função callready_filter()
Também é possível implementar uma função do tipo callback após a filtragem
Para isso, crie a função callback_filter(xdi), onde xdi é o identificador do filtro, caso haja mais de um
Essas funções não são obrigatórias, ou seja, só serão executadas se existirem. Caso positivo, para evitar duplicidades, lembre-se de implementar as funções callready e callback em arquivos específicos, presentes nas respectivas páginas finais, já que o seu objetivo não é genérico.