根据搜索输入隐藏/显示 div

Question

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

所以我的页面显示家具组及其包含的家具。组名称/编号和描述作为标题 div 存在，在其下方有一个使用实际家具创建的表格。只要我在表格行中输入“沙发”或“椅子”，我当前的 JavaScript 就可以工作。但是，如果我输入家具组的名称，它只会显示名称/编号/描述和图像，但会隐藏表格。组名称/描述在此块中：

@foreach ($orderFormData->pgroups as $pgroup)
<div class="group-container">
        <h3 style="font-size: 26px; padding: 10px 0;">{{ $pgroup->group_name 
}} - {{ $pgroup->group_code }}</h3>
        <p class="uk-text-muted" style="font-size: 20px;" >{!! 
html_entity_decode($pgroup->group_desc) !!}</p>

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

我的一个想法是添加这样的东西

<script type="text/javascript">
if($('.group-container').children('tr:visible').length == 0) {
$('.group-container').hide();
} else {
$('.group-container').show();
}
</script>

在我下面的第一行 html 下，就在 foreach 循环下。但我不知道这是否是正确的想法，也不知道如何以应有的方式使用它。

HTML：

@foreach ($orderFormData->pgroups as $pgroup)
<div class="group-container">
        <h3 style="font-size: 26px; padding: 10px 0;">{{ $pgroup->group_name }} - {{ $pgroup->group_code }}</h3>
        <p class="uk-text-muted" style="font-size: 20px;" >{!! html_entity_decode($pgroup->group_desc) !!}</p> <!--Group Description-->

        <div class="uk-grid">
            <div class="uk-width-2-10">
                <ul style="margin: 0; padding: 0; list-style-type: none; float: left; width: 100%;">
                    @foreach ($pgroup->image_names as $image_name)
                    <li><a href="/imagelib/Bigthumbs/{{ substr($image_name, 0, strpos($image_name, ',')) }}" target=_blank><img src="/imagelib/Bigthumbs/{{ substr($image_name, 0, strpos($image_name, ',')) }}" style="width: 100%; height: auto;" /></a><span class="uk-text-center" style="padding: 0 0 5px;">{{ substr($image_name, strpos( $image_name, ',') + 1)  }}</span></li>
                    @endforeach
                </ul>
            </div>

            <div class="uk-width-8-10">
                <table id="userTbl" class="uk-table" style="width: 100%; min-width: 768px;">
                    <thead>
                    <tr>
                        <th style="width: 10%; font-size: 20px;">Frame</th>
                        <th style="width: 20%; font-size: 20px;">Description</th>
                        <th style="width: 15%; font-size: 20px;">Cover/Color</th>
                        <th style="width: 15%; font-size: 20px;">Cover/Color</th>
                        <th style="width: 20%; font-size: 20px;">Quantity</th>
                        <th style="width: 15%; font-size: 20px; text-align: center;"><b>Price</b></th>
                    </tr>
                    </thead>

                    <tbody>

                    @foreach ($pgroup->pskus as $psku)
                    <?php $tempdata['sku-' . $i] = $psku ?>
                    <tr class="@if (isset($psku->quantity) && $psku->quantity > 0) {{ highlight }} @endif">
                        <td style="font-weight: 500; line-height: 30px; font-size: 14px;">{{ $psku->frame_fmt }}</td>
                        <td style="font-weight: 500; line-height: 30px; font-size: 14px;">{!! html_entity_decode($psku->frame_desc) !!}</td>
                        <td style="font-weight: 500; line-height: 30px; font-size: 14px;">{{ $psku->cover1_code }}/{{ $psku->color1_code }} {{ $psku->color1_desc }}</td>
                        <td style="font-weight: 500; line-height: 30px; font-size: 14px;">{{ $psku->cover2_code }}/{{ $psku->color2_code }} {{ $psku->color2_desc }}</td>
                        <td style="font-weight: 700; line-height: 30px; font-size: 14px;">
                            <span style="text-align: center; display: block; width: 100%;">${{ $psku->price }}</span>
                        </td>
                    </tr>
                    <?php $i++; ?>
                    @endforeach
                    </tbody>
                </table>
            </div>

        </div>
</div>
@endforeach

JS：

<script>
$(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++;
        }
    });
  });
});
</script>

Answer 1

您可以先搜索组，如果名称/描述匹配，则显示整个组及其所有行。否则按常规程序。

<script>
$(document).ready(function(){
$("#srch-term").keyup(function(){

    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(), count = 0;
    var search_regex = new RegExp(filter, "i")

    // Loop through the main container as well as the table body and row that contains the match
    $(".group-container").each(function(){
        //check if filter matches the group name or description
        var group_name = $(this).children('h3').text()
        var group_description = $(this).children('.uk-text-muted').text()

        if(group_name.search(search_regex)>=0 || group_description.search(search_regex)>=0){ // filter matches
            $(this).show() // show group
            $(this).find("tbody tr").show() // and all children
            return // skip tr filtering
        }

        var no_matches = true

        $(this).find("tbody tr").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(search_regex) < 0) {
                $(this).fadeOut();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
                no_matches = false
            }
        });

        if(no_matches){ // if no tr matched the search either, hide whole group
            $(this).fadeOut();
        }

    });
  });
});
</script>