{"id":3709,"date":"2016-07-08T09:40:58","date_gmt":"2016-07-08T12:40:58","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=3709"},"modified":"2019-03-16T02:26:16","modified_gmt":"2019-03-16T05:26:16","slug":"jquery-filtrando-itens-de-uma-lista","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/jquery-filtrando-itens-de-uma-lista\/","title":{"rendered":"jQuery – Filtrando itens de uma lista"},"content":{"rendered":"

Oi gente, tudo joia? Neste artigo\u00a0vamos usar um plugin do jQuery<\/strong> muito interessante, o HideSeek<\/em>, que permite usar\u00a0um campo de buscas para filtrar os itens de uma lista.<\/p>\n

1. Adicione os scripts jQuery ao seu site<\/h2>\n
<script type=\"text\/javascript\" src=\"jquery-2.0.2.min.js\">\r\n<script type=\"text\/javascript\" src=\"jquery.hideseek.min.js\"><\/pre>\n
Certifique-se de inserir o script do HideSeek<\/em> ap\u00f3s o script do jQuery.<\/p>\n
2. HTML<\/h2>\n
<input id=\"search\" name=\"search\" placeholder=\"Start typing here\" type=\"text\" data-list=\".list\">\r\n<ul class=\"list\">\r\n  <li>item 1<\/li>\r\n  <li>...<\/li>\r\n  <li><a href=\"#\">item 2<\/a><\/li>\r\n<\/ul><\/pre>\n
Observe que inserimos\u00a0seletores no campo de buscas (#search)<\/em> e na lista (.list)<\/em>. \u00c9 importante tamb\u00e9m observar que adicionamos um atributo chamado data-list<\/em>, com o valor ‘.list’,<\/em> que \u00e9 o seletor da lista na qual aplicaremos o filtro.<\/p>\n
3. Javascript<\/h2>\n
$(document).ready(function() {\r\n    $('#search').hideseek();\r\n});<\/pre>\n
Com isto, aplicamos o HideSeek ao nosso campo de buscas.<\/p>\n
Outras op\u00e7\u00f5es:<\/h3>\n
highlight: true, \/\/Destaca o trecho do item que foi selecionado\r\nnodata: 'No results found', \/\/Mensagem a ser exibida caso n\u00e3o sejam encontrados resultados\r\nnavigation: true, \/\/Permite adicionar links aos itens\r\nignore: '.ignore', \/\/Permite ignorar os itens que possuam uma determinada classe, nesse caso a classe .ignore\r\nignore_accents: true, \/\/Desconsidera acentua\u00e7\u00e3o na busca\r\nheaders: '.origin', \/\/Permite usar itens como cabe\u00e7alho, com a finalidade de organizar os itens na busca.\r\nhidden_mode: true \/\/Oculta todos os itens, exibindo apenas os resultados da busca<\/pre>\n
Outras op\u00e7\u00f5es como eventos e atributos deste plugin podem ser encontrados em sua p\u00e1gina oficial<\/a>.<\/p>\n
Exemplo:<\/h2>\n
No exemplo abaixo, temos um campo de buscas e abaixo dele uma lista com todos os 123 cursos que s\u00e3o disponibilizados no Clube do Assinante do MX Cursos. Estou usando as op\u00e7\u00f5es: nodata<\/em>, highlight<\/em> e hidden_mode<\/em>.
\n