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.
<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.
<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.
$(document).ready(function() { $('#search').hideseek(); });
Com isto, aplicamos o HideSeek ao nosso campo de buscas.
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.
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!
Nos últimos anos, testemunhamos uma revolução na forma como os sites são criados, impulsionada pelo…
A animação 3D tem sido uma forma poderosa de contar histórias e criar experiências visuais…
Nos últimos anos, a inteligência artificial (IA) tem revolucionado a forma como criamos e editamos…
Nos últimos anos, a integração da inteligência artificial (IA) na criação de sites tem revolucionado…
Nos últimos anos, a edição de vídeo evoluiu rapidamente com o avanço da tecnologia, e…
A dublagem de filmes desempenha um papel fundamental na indústria cinematográfica, permitindo que obras de…
This website uses cookies.