laravel刀片模板中使用JS / JQuery的搜索欄過濾器出現問題

Question

我有一個帶有搜索欄的刀片模板，該模板沒有提交按鈕，用於過濾。 但是，我似乎無法對其進行適當的過濾，因為該頁面最初是使用angular的（已被完全刪除）。

我的頁面使用foreach循環顯示了我所有的產品，並顯示了頁面控制器中變量的信息（從數據庫中提取所有內容並存儲為變量）。 無論如何，一切都很好，但是我需要幫助使其正確過濾。

基本上，如果在搜索欄中輸入的術語位於控制器收集的JSON對象中的任何位置，那么我希望它僅顯示那些對象。 我什至需要另一個foreach循環。

這是html / blade代碼：

<!--Search bar div-->
<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>

<!--foreach loops around the wrapper that shows products, for reference-->
@foreach ($orderFormData->pgroups as $pgroup)
   @foreach ($pgroup->image_names as $image_name)
      @foreach ($pgroup->pskus as $psku)

搜索的Javascript（請參閱JSON對象的變量，這就是我需要在其中搜索的內容）

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

<script>
    var orderData = orderFormData // default value
    var search = function (e) {
        var term = e.currentTarget.value
        orderData = Object.entries(orderFormData).reduce(function (data, entry) {
            if (entry[0].match(term) || entry[1].match(term)) {
                data[entry[0]] = entry[1]
            }

            return data
        }, {})

        console.log(orderData)
    }

    document.querySelector('#srch-term').addEventListener('keyup', search)
</script>

我應該有更好的方法嗎？ 我什至需要在搜索欄周圍進行一個foreach循環

Answer 1

聽起來好像您正在尋找自動完成功能。 您是否看過jquery-ui-autocomplete庫？ 它很容易實現，並且可能比自己編寫循環更容易添加更多功能。

https://jqueryui.com/autocomplete/

我將探討為什么在下面命名該函數，但這是我的實現：

          monkeyPatchAutocomplete();
            $("#your_searchbox_selector").autocomplete({
              source: // http://Your_Search_URL_endpoint_here,
              delay: 500, // prevents search from running on *every* keystroke
              minLength: 1, // default is 2, change or remove as you like

              // open page after selecting (with enter key).
              select: function( event, ui )
                {
                  var qval = ui.item.id // this pulls whatever field you're looking for in your JSON that you want to use to direct your user to the new page, in my case "id";
                  var url = 'http://whereever_you_want_your_user_to_go?';
                  window.location = url + qval;
                }
            });

對於我的實現，我想使用活動項和非活動項對自動完成列表中的結果進行顏色編碼，因此我的搜索控制器JSON結果包括3個字段：

'value' => $searchable_values, 'id' => $id_mapping_of_whatever, 'class' => $css_classes_to_use

我的搜索控制器將電子郵件，姓名和電話號碼插入到可搜索的value字段中，然后映射一個ID，然后插入用於通過jQuery自動補全上的Monkeypatch更改結果的文本顏色的CSS類：

       function monkeyPatchAutocomplete()
        {
          $.ui.autocomplete.prototype._renderItem = function( ul, item)
            {
              var re = new RegExp(this.term, 'i');
              var t = item.label.replace(re,"<span class='autocomplete-span'>" + this.term + "</span>");

              return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a class='text-" + item.class + "'>" + t + "</a>" )
                .appendTo( ul )
            };
          };

如果您有興趣格式化結果，請查看dev.e.loper的答案： 我如何自定義格式化自動完成插件結果？ 。