javascript - 在 Laravel Blade 模板中使用 JS/JQuery 时搜索栏过滤器的问题

Question

我有一个带有搜索栏的 Blade 模板，它没有提交按钮，用于过滤。但是，我似乎无法让它进行适当的过滤，因为该页面最初使用的是 Angular (已被完全删除)。

我的页面使用 foreach 循环显示我的所有产品，并显示页面 Controller 中变量的信息(从数据库中提取所有内容并存储为变量)。不管怎样，一切都显示良好，但我需要帮助才能正确过滤。

基本上，如果在搜索栏中输入的术语位于 Controller 收集的 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;
                }
            });

对于我的实现，我想使用事件和非事件条目对自动完成列表中的结果进行颜色编码，因此我的搜索 Controller JSON 结果包含 3 个字段:

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

我的搜索 Controller 将电子邮件、姓名和电话号码插入可搜索的值字段，然后映射 ID，并插入我用来通过 monkeypatch 更改结果文本颜色的 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 )
            };
          };

如果您有兴趣格式化结果，请查看 dev.e.loper的答复:How can I custom-format the Autocomplete plug-in results? .