在 laravel Blade/HTML 中通过 javascript 中的搜索栏进行过滤答案

【问题标题】：doing a filter by search bar in javascript, within laravel blade/HTML在 laravel Blade/HTML 中通过 javascript 中的搜索栏进行过滤
【发布时间】：2018-04-24 23:03:57
【问题描述】：

我有一个驱动我们当前网站的 laravel 刀片模板，该模板显示家具组，每个组包含几件物品/家具。此页面是使用 laravel 中的 foreach 循环构建的，既适用于由 $orderformdata->pgroups 构建的家具组，也适用于由 $pgroup->pskus 构建的组中的作品。

我有一个没有提交按钮的搜索栏，它曾经由 angular 驱动并用于在页面上进行实时过滤。即，如果您输入“沙发”，则任何不包含“沙发”一词的内容都会立即从页面上消失。所以我不是在寻找自动完成，而是一个没有提交按钮或功能的实时搜索栏过滤器。

我不是 javascript 专业人士，也不知道该怎么做。我有这些产品的 JSON 编码变量，但我也想我可以使用 JS 或 JQuery 来过滤我的 foreach 循环。

这是页面的 Javascript，包括 JSON 对象，以及当前不工作的搜索 JS：

<script type = "text/javascript">
var orderFormData = <?php echo json_encode ($tempdata);?>;
</script>
<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>

这是带有搜索栏和主组 foreach 循环的刀片：

<div class="uk-width-5-10">

        <div class="md-input-wrapper search-form">
            <form id="searchProducts">
                <input type="text" class="md-input label-fixed" name="srch-term" id="srch-term" autofocus placeholder="Search Products"/>
                <span class="md-input-bar"></span>

            </form>
        </div>

<?php
$tempdata = [];
$i = 0;
?>

@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-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 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

我认为我目前的 JS 无论如何都走错了路，但我需要一些帮助才能开始使用合适的 JS 方法。我可以尝试它如何从那里过滤东西，但这至少可以让我了解我的结构。

任何关于如何将好的 JS 实时过滤器应用到此搜索栏/页面的提示将不胜感激

【问题讨论】：

标签： javascript angularjs json laravel

【解决方案1】：

使用前端框架更容易做到。

我不确定这是否是最好的方法，但我会尝试：

var searchBar = document.getElementById("srch-term");
var tbody = document.querySelectorAll('tbody');
searchBar.addEventListener("change", filterOnChange);

function filterOnChange(e) {
  var text = e.target.text;
  tbody.innerHTML = ''; //remove old data form the view
  var viewData = orderFormData.pgroup.filter(order => order.title === text) // i don't know exacly the structure of your json, your should adapt this line, your json is more nested.
  var tds;
   viewData.forEach(order => { 
                        var element = document.createElement(td)
                        td.innerTextElement = order.name;
                        tds.push(td);  
                    })
  tbody.appendChild(tds)
}

【讨论】：

【解决方案2】：

尝试使用 jQuery 的 dataTables.js 插件，它非常方便易用，并且有一个内置的搜索栏，您可以在其中搜索任何内容，并且表格会根据您的搜索条件缩小。您可以按升序和降序对表格进行排序，这也是内置的。这是cdn的链接。

CSS： //cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css

JS： //cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js

jQuery: $(document).ready(function(){ $('#myTable').DataTable(); });

只需将此 id 提供给您的表： #myTable

【讨论】：