jQuery – Filtrando itens de uma lista

Oi gente, tudo joia? Neste artigo vamos usar um plugin do jQuery muito interessante, o HideSeek, que permite usar um campo de buscas para filtrar os itens de uma lista.

1. Adicione os scripts jQuery ao seu site

<script type="text/javascript" src="jquery-2.0.2.min.js">
<script type="text/javascript" src="jquery.hideseek.min.js">

Certifique-se de inserir o script do HideSeek após o script do jQuery.

2. HTML

<input id="search" name="search" placeholder="Start typing here" type="text" data-list=".list">
<ul class="list">
  <li>item 1</li>
  <li>...</li>
  <li><a href="#">item 2</a></li>
</ul>

Observe que inserimos seletores no campo de buscas (#search) e na lista (.list). É importante também observar que adicionamos um atributo chamado data-list, com o valor ‘.list’, que é o seletor da lista na qual aplicaremos o filtro.

3. Javascript

$(document).ready(function() {
    $('#search').hideseek();
});

Com isto, aplicamos o HideSeek ao nosso campo de buscas.

Outras opções:

highlight: true, //Destaca o trecho do item que foi selecionado
nodata: 'No results found', //Mensagem a ser exibida caso não sejam encontrados resultados
navigation: true, //Permite adicionar links aos itens
ignore: '.ignore', //Permite ignorar os itens que possuam uma determinada classe, nesse caso a classe .ignore
ignore_accents: true, //Desconsidera acentuação na busca
headers: '.origin', //Permite usar itens como cabeçalho, com a finalidade de organizar os itens na busca.
hidden_mode: true //Oculta todos os itens, exibindo apenas os resultados da busca

Outras opções como eventos e atributos deste plugin podem ser encontrados em sua página oficial.

Exemplo:

No exemplo abaixo, temos um campo de buscas e abaixo dele uma lista com todos os 123 cursos que são disponibilizados no Clube do Assinante do MX Cursos. Estou usando as opções: nodata, highlight e hidden_mode.

Bem, este foi um exemplo simples da utilização deste plugin sensacional.

Um abraço e Bons estudos!