Javascript 在laravel刀片模板中使用JS/JQuery时出现搜索栏过滤器问题

我有一个带有搜索栏的刀片模板，没有提交按钮，用于过滤。然而，我似乎无法对其进行适当的过滤，因为页面最初使用的是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)

@foreach（$orderFormData->pgroups作为$pgroup）
@foreach（$pgroup->image\u name作为$image\u name）
@foreach（$pgroup->pskus作为$psku）

用于搜索的Javascript（请参阅JSON对象的变量，这就是我需要在其中搜索的内容）

var orderFormData=；
var orderData=orderFormData//默认值
变量搜索=函数（e）{
var术语=e.currentTarget.value
orderData=Object.entries（orderFormData）.reduce（函数（数据，条目）{
if（条目[0]。匹配（术语）| |条目[1]。匹配（术语））{
数据[条目[0]]=条目[1]
}
返回数据
}, {})
console.log（orderData）
}
document.querySelector（“#srch term”）.addEventListener（'keyup'，search）

---

我有没有更好的办法？我甚至可能需要在搜索栏上做一个foreach循环

这听起来像是在寻找一个自动完成。你看过图书馆了吗？它很容易实现，并且可能比自己编写循环更容易添加更多功能

我将在下面介绍为什么命名该函数，但以下是我的实现：

          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\u values，'id'=>$id\u mapping\u of\u which，'class'=>$css\u classes\u to\u use

我的搜索控制器将电子邮件、姓名和电话号码插入可搜索的值字段，然后映射一个id，并插入css类，我使用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 )
            };
          };

函数monkeyPatchAutocomplete（）
{
$.ui.autocomplete.prototype.\u renderItem=函数（ul，项目）
{
var re=新的RegExp（该术语为“i”）；
var t=item.label.replace（re，“+this.term+”）；
返回$（“
”）
.data（“item.autocomplete”，item）
.附加（"’的答案：。
我想这就完成了搜索框中的术语，对吗？我有一个页面实例，显示了100种产品，但如果他们搜索沙发，我只希望有沙发的产品继续显示。对不起，我想我误解了你的问题。我是否理解你希望结果作为最终用户类型过滤掉使用搜索栏的其他字符，以从显示所有产品详细信息的结果页面中消失？（与我概述的从搜索栏自动完成的结果列表中消失相反？）或者只有在他们按回车键提交时才提交？我个人不知道如何才能做到这一点，但我希望重新表述和澄清一下你的问题对其他人可能会有更好的答案。
       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 )
            };
          };