Skip to content

Instantly share code, notes, and snippets.

@jhonyjss
Created January 31, 2017 21:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jhonyjss/5bdb5605aab8b0f09d6389345a84de85 to your computer and use it in GitHub Desktop.
Save jhonyjss/5bdb5605aab8b0f09d6389345a84de85 to your computer and use it in GitHub Desktop.
<div class="form-inline form-times">
<p> BUSCA POR ASSUNTO </p>
<input type="text" class="form-control" id="input-times" placeholder="Digite o nome do time que deseja buscar">
<button type="button" id="btn-times" class="btn btn-times"><i class="glyphicon glyphicon-search" aria-hidden="true"></i></button>
</div>
<div id="filter-results"></div>
<nav>
<ul>
<li>Corinthians</li>
<li>Palmeiras</li>
<li>São Paulo</li>
<li>Grêmio</li>
<li>Portuguesa</li>
</ul>
</nav>
<script>
$(document).ready(function () {
//Plugin de procura em tempo real
window.liveFilter({
target:'#btn-times',
filters:'nav ul li',
fieldSearch:'#input-times',
evento:'click' //evento utilizado click, default: keyup
})
</script>
window.liveFilter = function(oArgs) {
var target = typeof oArgs.target !== 'undefined' ? oArgs.target : '', // campo ou botão
filters = typeof oArgs.filters !== 'undefined' ? oArgs.filters : '',// campos à ser filtrados, texto, box, colunas, tabelas.
parent = typeof oArgs.parent !== 'undefined' ? oArgs.parent : '', // Caso seja necessário utilizar elemento parent (jquery)
evento = typeof oArgs.evento !== 'undefined' ? oArgs.evento : 'keyup', // pode utilizar qual evento quiser
fieldSearch = typeof oArgs.fieldSearch !== 'undefined' ? oArgs.fieldSearch : ''; //Caso seja botão você deve informar este argumento no html
$(target).on(evento, function(event) {
// Recupera o texto do campo de entrada e redefine a contagem para zero
var filter = event.type == 'keyup' ? $(this).val() : $(fieldSearch).val()
count = 0;
// Faz o loop através do texto procurado dentro dos elementos
$(filters).each(function() {
// Se o item da lista não contiver alguma frase ou elemento então some
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).parent(parent).fadeOut();
var numberItems = count;
if (numberItems > 0) {
$("#filter-results").fadeIn().html('<br /><span class="alert alert-success">Resultado encontrado: ' + count + '</span>');
} else {
$("#filter-results").fadeIn().html('<br /><span class="alert alert-danger">Nenhum resultado encontrado</span>');
}
// senão mostra
} else {
$(this).parent(parent).fadeIn();
count++;
if (filter.length == 0) {
$("#filter-results").fadeOut()
}
}
});
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment