Question

我有一个带搜索栏的刀片模板，它没有提交按钮，用于过滤。但是，我似乎无法对其进行适当过滤，因为页面最初使用的是角度（已完全删除）。

我的页面使用foreach循环显示我的所有产品，并在页面控制器中显示变量的信息（从数据库中提取所有内容并存储为变量）。无论如何，一切都很好，但我需要帮助让这个过滤得当。

基本上，如果在搜索栏中输入的术语是控制器收集的JSON对象中的任何位置，那么我希望它只显示这些对象。我甚至可能需要另一个foreach循环。

这是html /刀片代码：

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

我的搜索控制器将电子邮件，姓名和电话号码插入可搜索的值字段，然后映射id，并插入用于通过{{3更改结果的文本颜色的css类在jQuery的自动完成：

       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 )
            };
          };

如果您对格式化结果感兴趣，请查看monkeypatch对dev.e.loper的回答。

搜索栏过滤器的问题，在laravel刀片模板中使用JS / JQuery

1 个答案: