Elementos filtráveis
Todos os elementos que têm mais do que um elemento de criança, pode ser filtrado.
Como criar um campo de pesquisa:
- O elemento que você quer ser filtrável, deve incluir o data-filter="true" atributo.
- Criar um <input> elemento com um id especificado e adicionar o data-type="search" atributo. Isto irá criar um campo de pesquisa básica. Enrole a <input> de um formulário, e adicione o "ui-filterable" classe para o <form> elemento - o que irá ajustar a margem entre o campo de pesquisa e o elemento filtrável.
- Em seguida, adicione o data-input de atributo para o elemento filtrável. Seu valor deve corresponder ao ID do <input> elemento.
Abaixo, criamos uma visão de lista filtrável:
Procurar por elementos de uma lista
<form class="ui-filterable">
<input id="myFilter"
data-type="search">
</form>
<ul data-role="listview"
data-filter="true" data-input="#myFilter" >
<li><a href="#">Adele</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
</ul> Tente você mesmo " Dica: Use um espaço reservado para especificar uma pequena dica que descreve o valor esperado do campo de pesquisa:
Exemplo
<input
id="myFilter" data-type="search" placeholder="Search
for names.." >
Tente você mesmo " Filtro personalizado
O texto dentro de cada elemento filho é o texto real que é usado para filtragem (como "Adele" ou "B" para "Billy" ). No entanto, se você quiser filtrar a busca de um texto filtro personalizado em vez disso, você pode adicionar o atributo-filtertext dados para qualquer elemento filho:
Se você usar o data-filtertext atributo em um elemento, o texto original / conteúdo desse elemento em particular é ignorada para a filtragem (No exemplo acima, você já não são capazes de procurar o item da lista "Adele" . Você só pode encontrar Adele, digitando as palavras-chave "f, a, v ou fav ".)
mais Exemplos
Listas de Filtros dobráveis
Como filtrar um conjunto dobrável de listas.
Tabelas de filtro
Como filtrar uma tabela.
Filtrar <div> elementos
Como filtrar um <div> elemento que contém criança <p> elementos.