JSまたはAJAXを使用してページ上のJSONオブジェクト（laravel）

Question

を使用して検索フィルタを使用するAJAXおよびJSの多くは新しくなりましたが、Laravelサイトの古い角度機能を置き換える必要があります。

静的/スティッキーヘッダー検索バーがあるページがありますが、送信ボタンはありません。検索入力時にライブフィルタを実行する必要があります。つまり、ソファを入力すると、単語のソファなしでページから何も隠すはずです。

Laravelブレード/ HTMLはコントローラデータからforeachループで構築されていますが、重要なのはデータが以下に示すorderFormDataというJSONオブジェクトに格納されていることです。

JSONと検索バーの間に一致しないものを非表示にするには、シンプルで効果的なライブ検索フィルタが必要です。ページは複数のHTMLテーブルで構築されているので、テーブルでフィルタリングしたくないので、複雑すぎると思います。おそらくAJAXを使って、JSONでそれを行うだけで十分です。しかし、私はここでは完全な初心者です。私は解決策が切望されています。ここで

は、検索HTMLです：

<div class="md-input-wrapper search-form"> 
      <form class="uk-search" 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> 

ここではJSONオブジェクトと、私が遊んでいたいくつかのJSのですが、それは動作しません：

<script type = "text/javascript"> 
var orderFormData = <?php echo json_encode ($tempdata);?>; 

$(document).ready(function(){ 
$('#srch-term').on('keyup',function(){ 
    var searchTerm = $(this).val().toLowerCase(); 
    $('.uk-table tbody tr').each(function(){ 
     var lineStr = $(this).text().toLowerCase(); 
     if(lineStr.indexOf(searchTerm) === -1){ 
      $(this).hide(); 
     }else{ 
      $(this).show(); 
     } 
     }); 
    }); 
}); 
</script> 

これは単なる純粋なJSのアイデアですしかし、このシナリオではもっとうまくいくかどうかはAJAXにも関心があります。検索バーとJSONオブジェクトを結び付けることで、ページ上の項目を適切にフィルタリングするにはどうすればよいですか？

Answer 1

hideとshowの検索機能をAjaxに追加する必要はありません。これはDOMを操作するだけです.AJAXはphpからjsonを呼び出すことができ、jqueryを使用するとkeypressにtdをループして使用できます。 jquery、onkeypressが含まれています。関数を呼び出すと、この関数では表示と非表示を行います。 私の古いプロジェクト#tabellaWebLogの簡単な例は、テーブルのID ricercaUserは入力検索のIDであり、trTabellaWebLogは、代わりに検索をしたい行のIDでした.ricUserはテーブルの列のクラスでしたテーブル内で検索をループする... Bye

user = $('#ricercaUser').val(); 
$('#tabellaWebLog').find("#TrTabellaWebLogRiga:not(:contains('"+ user +"'))").hide(); 
$(".ricUser:contains('" + user + "')").parent().show(); 
$(".ricUser:not(:contains('" + user + "'))").parent().hide();