title: Loading js-grid then filtering data
body: <p>I have data being pulled from a db using php and then passed into javascript to load js-grid. I also have a dropdown populated with php containing the default value selected and stored by the user. My goal is to populate the grid with all data returned, then filter it based on the selected option in the dropdown. </p>
  
  <p>I can't seem to understand how to load then filter data using js-grid.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;var order_json = &lt;?= $order_json ?&gt;; var user_list = &lt;?= $user_list['activeListId'] ?&gt;;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>main.js</p>
  
  <pre><code>$( document ).ready(function() {
  $("#jsGrid").jsGrid({
      width: "100%",
      height: "400px",
  
      inserting: false,
      editing: false,
      sorting: true,
      paging: false,
      pageSize: 30,
  
      noDataContent: "No orders found",
  
      data: order_json,
  
      fields: [
          { name: "OrderId", type: "number", title: "Order ID", visible: false },
          { name: "ListId", type: "number", title: "Order List ID", visible: true},
          { name: "Name", type: "text", title: "Order Name", align: "left"}
      ],
  });
  var grid = $("#jsGrid").data("JSGrid");
    grid.search({ListId: user_list})
  });
  </code></pre>
  
  <p>I have tried some different approaches and none have worked. Any help would be appreciated. </p>