Blog do MX Cursos

jQuery – Filtrando itens de uma lista

Avaliar post

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

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

2. HTML

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

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

Outras opções:

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!

Your Header Sidebar area is currently empty. Hurry up and add some widgets.

Newsletter

Newsletter

Receba em seu e-mail conteúdos semanais sobre desenvolvimento, design, audiovisual e tecnlogia.

Inscrição realizada com sucesso!