HideSeek

by Felipe Santos

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://mxcursos.com/catalog/view/theme/mxcursos/js/vendor/HideSeek/jquery.hideseek.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<h1>Clube do assinante - MXCURSOS</h1>
<h3>Lista de cursos</h3>
<input id="search" name="search" placeholder="Digite o curso que você procura" type="text" data-list=".list" class="form-control">
<ul class="list">
<li style="display: list-item;" class="no-results">Nenhum resultado encontrado</li>
 <li>WordPress Professional - Treinamento essencial</li>
 <li>Animações Digitais com Toon Boom Animate PRO 3</li>
 <li>Curso de SEO Completo</li>
 <li>Curso de Google Analytics - Treinamento Completo</li>
 <li>Curso de E-mail Marketing Efetivo com Mailchimp</li>
 <li>Dreamweaver CC - Treinamento essencial</li>
 <li>Curso de Usabilidade Web</li>
 <li>Curso de Adobe Muse CC</li>
 <li>Curso de Landing Page</li>
 <li>Curso de Gestão de Equipes e Tarefas com Runrun.it para Freelancer</li>
 <li>Curso de Gestão de Equipes e Tarefas com Runrun.it</li>
 <li>Curso Princípios e Fundamentos do WebDesign</li>
 <li>Curso de Design de Layouts com Photoshop CC</li>
 <li>Curso de Gerenciamento de Tarefas com Trello</li>
 <li>Curso de Precificação para Freelancers</li>
 <li>Curso de E-Mail Marketing com GetResponse</li>
 <li>Curso de WebDesign Responsivo Avançado - Mobile First</li>
 <li>Curso de Webdesign responsivo</li>
 <li>Curso Completo de Word 2010 </li>
 <li>Curso completo de Excel 2010</li>
 <li>Curso de Powerpoint 2010 completo</li>
 <li>Curso Criando sistemas com Dreamweaver CS6, PHP e Mysql</li>
 <li>Curso de Photoshop para fotógrafos</li>
 <li>Fotografia digital com Photoshop Lightroom 4</li>
 <li>Curso de Adobe Audition CS6</li>
 <li>Curso de Dreamweaver CS6</li>
 <li>Curso completo de Adobe Premiere CS5</li>
 <li>Curso de After Effects CS5</li>
 <li>Curso completo de Adobe Encore...

CSS

h1, h3{ text-align: center;}
.list li{ padding-left: 10px; background: #F9F9F9; height: 40px; list-style: none; line-height: 40px; }
.list li:hover{ background: #333; color: #FFF; }
.list{ padding: 0px;}

JavaScript

$(document).ready(function() {
    $('#search').hideseek({
     nodata: 'Nenhum curso encontrado',
     highlight: true,
     hidden_mode: true
    });
});