我正试图隐藏或显示不同的div,因为有人在搜索栏中输入了内容。我已经使用bootstrap来实质上组织通过php循环创建的多行数据。每个“行”数据都是一个,其中有5个“列”,每个列由5个组成。
现在,当我运行代码时,只有“列”内容会显示内部的值是否与搜索栏中的值匹配。我想要的是“行”中的所有内容,以显示是否匹配。关于我缺少的任何想法?
提前致谢!
$("#searchInput").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
// Loop through the comment list
$('#searchableRow 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();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
});
<input type="text" id="searchInput" name="searchInput">
<?php
if (mysqli_num_rows($query) > 0) {
while($row = mysqli_fetch_assoc($query)) {
?>
<div class="row" id="searchableRow" style="padding-top:10px;">
<div class="col-4" style="line-height:32px;">
<?php echo $row["value1"]; ?>
</div>
<div class="col-2" style="text-align:right; line-height:32px;">
$<?php echo $row["value2"]; ?>
</div>
<div class="col-2" style="line-height:32px; text-align:right;">
<?php
$createTimeStamp = $row["createTimeStamp"];
$createTimeStamp = new DateTime($createTimeStamp);
echo $createTimeStamp->format('m/d/y');
?>
</div>
<div class="col-2" style="line-height:32px; text-align:right;">
<?php
$editTimeStamp = $row["editTimeStamp"];
$editTimeStamp = new DateTime($editTimeStamp);
echo $editTimeStamp->format('m/d/y');
?>
</div>
<div class="col-1" style="text-align:right;">
<?php echo $row["value3"]; ?>
</div>
<div class="col-1" style="text-align:center;">
<?php echo $row["value4"]; ?>
</div>
</div>
<?php
}
}
?>