[英]Live search on an Div with input filter
https://jsfiddle.net/Lh9efLxm/
我在使用實時搜索腳本時遇到了一些麻煩。
我有一些div作為“行”,一些p作為“列”聲明
作為#filter的輸入字段應該隱藏所有不相關的“行”(div)
$('#results div').hide();
但我似乎有些想念明白了。
有人能幫我嗎? 謝謝
在您的腳本中,您隱藏和顯示所有#results div
而不是each
循環中的特定#results div
。 所以將選擇器更改為this
。
另外,您忘記在小提琴中包含 jQuery。
$("#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>
您可以使用過濾功能在 div 中搜索。
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>
在這里
非常感謝! 這對我幫助很大。 我得到了這個代碼:
<!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>
我添加了反饋和卡片樣式。
$('.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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.