Skip to content

Instantly share code, notes, and snippets.

@felipegenuino
Last active August 18, 2020 13:49
Show Gist options
  • Save felipegenuino/c83f1b4b5cf53067c3687ba2c82d4663 to your computer and use it in GitHub Desktop.
Save felipegenuino/c83f1b4b5cf53067c3687ba2c82d4663 to your computer and use it in GitHub Desktop.
Simple Live Search with jquery with feedback
$('.globalSearchResultNoFoundFeedback').hide()
$(".globalInputSearch").keyup(function() {
// Retrieve the input field text and reset the count to zero
let filter = $(this).val(),
count = 0;
if (count == 0) {
$('.globalSearchResultNoFoundFeedback').hide()
}
// Loop through the comment list
$('.globalTargetList li').each(function() {
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).hide(); // MY CHANGE
if (count == 0) {
$('.globalSearchResultNoFoundFeedback').show()
} else {
$('.globalSearchResultNoFoundFeedback').hide()
}
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show(); // MY CHANGE
count++;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<body>
<!-- search input -->
<input class="globalInputSearch" type="text" placeholder="Search for anything">
<!-- list -->
<ul class="globalTargetList">
<li>
<div class="card">
<h4>Paçoca </h4>
<p> Paçoca de amendoim, ou Capiroçava, é um doce tradicional brasileiro à base de amendoim, farinha de mandioca e açúcar, típico da comida caipira do estado de São Paulo. É tradicionalmente preparada no Brasil para consumo nas festividades da Semana Santa e festas juninas. </p>
<h6> <strong> Lugar de origem:</strong> Brasil </span> </h6>
</div>
</li>
<li>
<div class="card">
<h4>Ganache </h4>
<p>Ganache é uma mistura cremosa de chocolate e creme de leite, utilizado como cobertura ou recheio de bolos, cupcakes e outros itens de confeitaria. Ganache normalmente é feito aquecendo-se o creme, sendo adicionado em seguida o chocolate meio-amargo picado. </p>
<h6> <strong> Lugar de origem:</strong> França </span> </h6>
</div>
</li>
<li>
<div class="card">
<h4>Apfelstrudel </h4>
<p> O Apfelstrudel é uma sobremesa tradicional austríaca, nascida em Viena, tendo-se tornado popular internacionalmente. É a receita mais conhecida com a massa folhada da Europa central, conhecida em Alemão por Strudel. Pensa-se que tenha sido influenciada pelas cozinhas do Império Bizantino, da Arménia e da Turquia. </p>
<h6> <strong> Lugar de origem:</strong> Áustria </span> </h6>
</div>
</li>
</ul>
<!-- feedback -->
<div class="globalSearchResultNoFoundFeedback" aria-live="polite"> Feedback nothing found</div>
</body>
body{background:#d7dbd7; font-family: Roboto, sans-serif; padding: 20px;}
.globalInputSearch{ padding: 10px 20px; border: none; padding-right: 32px; font-size: 18px; padding-left: 20px; border-radius: 3px; box-shadow: 0 1px 1px 0 rgba(0,0,0,.06), 0 2px 5px 0 rgba(0,0,0,.2);}
.globalTargetList{ display: flex; list-style: none; padding: 0; flex-direction: column;}
.globalTargetList li .card{ margin-bottom: 10px; padding: 20px; background: #fff; box-shadow: 0 1px 1px 0 rgba(0,0,0,.06), 0 2px 5px 0 rgba(0,0,0,.2); border-radius: 3px;}
.globalTargetList li h4{margin: 0 0 10px 0; font-weight: 400; font-size: 22px; line-height: 21px;}
.globalTargetList li h6 { margin: 0; font-weight: 400; font-size: 13px; opacity: 0.6;}
.globalTargetList li p{ font-weight: 400; font-size: 14px; line-height: 20px; }
.globalSearchResultNoFoundFeedback{font-size: 30px; padding: 20px; color: #999; text-align: center;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment