html根据输入判断隐藏或显示,根据搜索输入隐藏/显示div

我已经制定了一些javascript来使用我的搜索栏来过滤/隐藏与搜索输入不匹配的内容。我说它的工作率约为95％我会说但是我有一个问题要解决。

所以我的页面显示家具组及其包含的家具。组名称/编号和描述作为标题div存在，下面有一个用实际家具创建的表格。只要我在打字沙发＆＃39;或者＆＃39;主席＆＃39;这将在表格行中。但是，如果我键入家具组的名称，它只显示名称/编号/描述和图像，但隐藏表格。组名称/描述在此块中：

@foreach ($orderFormData->pgroups as $pgroup)

{{ $pgroup->group_name

}} - {{ $pgroup->group_code }}

{!!

html_entity_decode($pgroup->group_desc) !!}

所以，我需要尝试稍微重构一下以添加功能，这样如果我的输入与组名称或描述匹配，它仍会显示该div的整个表格。

我的想法是添加类似的东西

if($('.group-container').children('tr:visible').length == 0) {

$('.group-container').hide();

} else {

$('.group-container').show();

}

在我的第一行html下面，在foreach循环下面。但我不知道这是不是正确的想法，也不知道如何正确地使用它。

HTML：

@foreach ($orderFormData->pgroups as $pgroup)

{{ $pgroup->group_name }} - {{ $pgroup->group_code }}

{!! html_entity_decode($pgroup->group_desc) !!}

@foreach ($pgroup->image_names as $image_name)

{{ substr($image_name, strpos( $image_name, ',') + 1) }}

@endforeach

FrameDescriptionCover/ColorCover/ColorQuantityPrice

@foreach ($pgroup->pskus as $psku)

{{ $psku->frame_fmt }}{!! html_entity_decode($psku->frame_desc) !!}{{ $psku->cover1_code }}/{{ $psku->color1_code }} {{ $psku->color1_desc }}{{ $psku->cover2_code }}/{{ $psku->color2_code }} {{ $psku->color2_desc }}

${{ $psku->price }}

@endforeach

@endforeach

JS：

$(document).ready(function(){

$("#srch-term").keyup(function(){

// Retrieve the input field text and reset the count to zero

var filter = $(this).val(), count = 0;

// Loop through the main container as well as the table body and row that contains the match

$(".group-container, tbody tr").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).fadeOut();

// Show the list item if the phrase matches and increase the count by 1

} else {

$(this).show();

count++;

}

});

});

});