Javascript search bar filter、ページ上に表示/非表示

Question

私のページでアクティブな検索/フィルタを取得しようとしています。以前は角度を使用していましたが、角度は削除されているので、プレーンなJSまたはJqueryで複製する必要があります。

私は検索ボックスを持っていますが、サブミット/ボタンは表示されず、アクティブな検索だけがあります。私は、検索に入力されたものによってページ上の項目をフィルタリングしたい。

マイページはJSの下のJSのようにJSONオブジェクトから読み込まれます。これらのオブジェクト値は、変数としてcontollerからループされます（これは、ブレードとコントローラを使用してラベルに入れられます）。

以下の検索JSコードは送信に依存しているため機能しませんが、それでも除外しません。私は単に、値が一致していないページに何かを隠したいと思っています。下の私のHTMLには、foreachループの1つを含むサンプルセクションがありますが、ページ上のすべてはjsonオブジェクトから来ています。

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を（動作しない）

<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長期'）のaddEventListener（ 'keyUpイベント'、検索）

Answer 1

。これを以下で使用できませんか？

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

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

});