Question

我正在尝试使用javascript在我的网页上构建实时搜索过滤器。结构的Becaus我不能使用数据表，我的团队已经同意不使用它。

我们的网站存在于laravel中，因此我正在使用现有的javascript完成页面的刀片模板。我们正试图通过搜索栏复制实时过滤器，而该搜索栏以前使用的是角度。

页面上的数据是由控制器构建的，该控制器使用来自另一个文件的php变量构建在线订单，因此我的刀片通过围绕产品组进行foreach循环来构建数据，然后生成skus / items以构建数据此屏幕截图中显示的表格：

因此，如果您查看图像和刀片，您可以看到我的foreach围绕组使用粗体名称和编号以及描述构建div。然后我有一个foreach为各个产品构建表头，循环将产品插入表中（即沙发，椅子等）。

因此，我试图找到使用搜索栏（下面的代码）对此数据进行实时过滤的最佳方法。例如，如果我在屏幕截图的页面上开始输入＆＃39; Ava＆＃39;，则bradshaw信息应该全部消失，只留下页面上的Ava信息。填充搜索时的实时/实时过滤器。没有提交按钮，因此必须进行实时过滤。

下面是搜索栏的代码，刀片正文，我有一个javascript块让我开始，但它根本没有进行任何实时过滤。我以前从来没有真正使用过ajax所以我认为它不起作用，因为我不确定我是否已经完成了ajax调用。我的控制台每次输入一个字符时都会显示404错误，但我不确定是否应该按URL搜索，这就是代码的建议方式。但是，我只想过滤页面上的实时数据，而不是URL。

如何重构这个JS以获得我正在寻找的实时过滤器？我以为我可能需要使用JSON对象，我在下面的JS中已经建立了这个对象。

搜索栏（与桌子主体不同的div）

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

HTML / Blade Body：

@foreach ($orderFormData->pgroups as $pgroup)
        <!-- <input type='hidden' name='search' value='{{ x.search }}' > -->
        <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 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

Javascript（功能无效）：

<script type = "text/javascript">
var orderFormData = <?php echo json_encode ($tempdata);?>;

$(document).ready(function(){
 $("#srch-term").on('keyup', function(){
    $search = $(this).val();
    $.ajax({
            type: 'get',
            url: '{{ URL::to("search") }}',
            data: {'search': $search},
            success: function(data){
               console.log(data);
            }

     });
 });
});
}

更新：

使用其他JS，没有ajax，并提供结构的概念

https://jsfiddle.net/

使用JS / AJAX对laravel

0 个答案: