Live search on an Div with input filter
Question
https://jsfiddle.net/Lh9efLxm/
I have some troubbles with a live search script.
I have some div as "rows" and some p as "columns" declared
The input fild as #filter should hide all "rows" (div) with no relevance
$('#results div').hide();
But it seems I have some miss understood.
Can some one help me? thx
4 answers
solution1
18 ACCPTED 2017-06-24 11:59:18
In your script, you hide and show All the #results div and not the specific one in the each loop. So change the selector to this .
Plus, you forgot to include jQuery in the fiddle.
$("#filter").keyup(function() { // Retrieve the input field text and reset the count to zero var filter = $(this).val(), count = 0; // Loop through the comment list $('#results div').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 // Show the list item if the phrase matches and increase the count by 1 } else { $(this).show(); // MY CHANGE count++; } }); }); .header { display: flex; } .header p { flex: 1; font-weight: bold; } .results { display: flex; } .results p { flex: 1; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="filter" type="text"> <div id="header"> <div class="header"> <p>ID</p> <p>Manufacturer</p> <p>Type</p> <p>PS</p> </div> </div> <div id="results"> <div class="results"> <p>1</p> <p>Toyota</p> <p>C 200</p> <p>114</p> </div> <div class="results"> <p>2</p> <p>Mercedes</p> <p>C 220</p> <p>144</p> </div> </div>
solution2
6 2019-01-31 13:33:20
You can search in div by using filter function.
jQuery("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); jQuery("#myDIV *").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="myInput" type="text" placeholder="Search.."> <div id="myDIV"> <p>I am a paragraph.</p> <div>I am a div element inside div.</div> <button>I am a button</button> <button>Another button</button> <p>Another paragraph.</p> </div>
de here
solution3
0 2019-02-01 20:13:03
Thank you very much! It helped me a lot. I got this code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<style>
input[type=text] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.ytube {
width: 90%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('arrow.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
</style>
<script type="text/javascript">
window.onload=function(){
$("#filter").keyup(function() {
var filter = $(this).val(),
count = 0;
$('#results div').each(function() {
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).hide();
} else {
$(this).show();
count++;
}
});
});
}
</script>
</head>
<body>
<header id="header">
<div id="stuck_container">
<input id="filter" type="text" placeholder="Keywords"/>
</div>
</header>
<section id="content">
<div id="results">
<div class="results"><div class="ytube"><a style="font-weight: bold; font-size: 18px;">Text 1</a></div></div>
<div class="results"><div class="ytube"><a style="font-weight: bold; font-size: 18px;">Text 6543</a></div></div>
<div class="results"><div class="ytube"><a style="font-weight: bold; font-size: 18px;">Text World 1</a></div></div>
<div class="results"><div class="ytube"><a style="font-weight: bold; font-size: 18px;">Text 1</a></div></div>
<div class="results"><div class="ytube"><a style="font-weight: bold; font-size: 18px;">1247589</a></div></div>
</div>
</section>
</body>
</html>
solution4
0 2020-08-18 07:18:40
Complete filter with feedback
credits from @itay-ganor
Im add feedback and card style.
$('.globalSearchResultNoFoundFeedback').hide() $(".globalInputSearch").keyup(function() { // Retrieve the input field text and reset the count to zero var 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++; } }); });
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;}
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make live search on an Div with input filter
Search Filter using Input and DIV
live search in input with checkbox filter value
JQuery Live filter for div
Live search and filter JavaScript
Live Search Filter Using Jquery
Live filter search using bootstrap
Live filter in custom select with input
live search ajax multiple input
search input by filter method
Related Tags