基于变量的laravel刀片中的JS实时搜索过滤器

Question

我有一个laravel网站，我正在使用我的刀片模板来构建一个JS搜索栏。没有提交按钮，我也不希望它提交，但我希望页面可以过滤，只显示与输入内容匹配的项目。

我的刀片是由一个控制器构建的，该控制器构建一个包含$pgroups和$pskus的orderFormData对象。如下所示，整个内容部分只是围绕订单表单对象的forlooops。所以我希望搜索能够查看这些对象，如果没有匹配，那么它就不会显示该组中的任何内容。

我在下面的代码中尝试了一些JS，但是我无法让它工作，而且，它更适合表格。

什么是在搜索栏上对此页面进行实时过滤的好方法？

HTML / Blade模板和JS：

<div class="wrapper">
<div class="uk-grid uk-grid-products">
    <!-- <div class="uk-width-1-1">
@foreach ($orderFormData->pgroups as $pgroup)

        <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%;">
                </ul>
            </div>

            <div class="uk-width-8-10">
                <table 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>
                            <div class="incrementer">
                              <button class="remove-button md-btn" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">remove</i></button>
                              <input onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" type="text" class="quantity-input md-input" id="sku-{{ $i }}" name="count" onClick="this.setSelectionRange(0, this.value.length);" style="width: 33%; min-width: 0; float: left; margin: 0; text-align: center; height: 30px;" value='@if (isset($psku->quantity)) {{ $psku->quantity }} @else 0 @endif' />
                              <button class="add-button md-btn md-btn-success" style="width: 33%; min-width: 0; float: left; height: 30px;"><i class="material-icons">add</i></button>
                            </div>
                        </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>
                    @if ($psku->avail_date)
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td style="text-align: right; font-weight: 700;">Available Date:</td>
                        <td style="color: #ff0000;">{{ \Carbon\Carbon::createFromFormat('dmY', $psku->avail_date)->toDateString() }}

                    </tr>
                    @endif
                    <?php $i++; ?>
                    @endforeach
                    </tbody>
                </table>
            </div>

        </div>
@endforeach

<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("srch-term");
filter = input.value.toUpperCase();
table = document.getElementsByClassName("wrapper");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
  if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
    tr[i].style.display = "";
  } else {
    tr[i].style.display = "none";
  }
}
}
}
</script>