Javascript搜索栏过滤，隐藏/显示在页面上

Question

I'm trying to get an active search/filter on my page. There was one previously using angular, but angular's been removed so I need to replicate with plain JS or Jquery.

I have a search box, no submit/button, just an active search. I want to filter the items on the page by what's typed in search.

My page is loaded from a JSON object, as seen in my JS below. These object values are looped as their variables from the contoller (This is in laravel using a blade and controller).

The search JS code below doesn't work as it relies on submit, but even then it doesn't filter. I simply want to hide anything on the page that doesn't have a matching value. My html below has a sample section with one of the foreach loops, but everything on the page comes from the json object.

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)

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

Javascript (not working)

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

Answer 1

cant't use this below?

var ret;
orderData.forEach(function(item, index){ 

   if(item!=term) ret.push(item);

});