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. 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"
  3. 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
  4. 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.
  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.
  3. Usuários avançados podem criar funções quando o filtro estiver pronto
    • Para isso, crie a função callready_filter()
  4. 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
  5. 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.
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.

Campo de busca

O texto inicial do campo será .
.

Resultado

O texto para um resultado vazio será .
no de o número de resultados encontrados.

para resultado vazio.
quando houver um resultado.
quando houver vários resultados para.

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