Você está usando um navegador desatualizado. Para a visualização correta, atualize seu navegador:

Mapa do site


SimpleUi

Atualizando

Código para Filtrar resultado Download

? - +
Filtrar resultado
  1. Coloque a classe ui_filter no campo de texto que irá filtrar o resultado
  2. 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:
  1. 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"
  2. Use no campo de texto o atributo data-no-result para alterar o texto quando não houver resultado
    • Informe o valor que desejar, exemplo: data-no-result="Resultado não encontrado"
  1. 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>.
  2. 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.
Customizar


Lista

A lista terá itens em . Saiba mais
Qualquer marcação (tag) pode ser usada, como:
  • containers (<div>)
  • lista (<ul>)
  • parágrafos (<p>)
  • tabela (<table>)
  • Dentre outros.

Rótulo do campo

O texto inicial do campo será .

Resultado vazio

O texto para um resultado vazio será .

Tags

Escolha os elementos e informe termos ocultos que serão indexados à pesquisa









Saiba mais
Para aumentar a transparência da consulta, o texto de data-tags será adicionado ao resultado do .ui_filterItem que ele faz parte. Portanto, ele se tornará visível para o leitor.
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>.
Tem certeza que deseja reiniciar todos os valores?

Resultado para Filtrar resultado