title: ajax request, query database, json_encode, return on success, show results
body: <p>I'm working on a new piece of code and I'm new to ajax so I cant get it to work.  I've got a textbox that has a javascript onKeyUp assigned to it.  The first function is a delay function.  It sets a delay timer, and as long as no other request is made via that delay timer, it runs a second function with the ajax after a certain time period.  Inside the ajax, it runs a database query located in the second file based on the text that was entered in the textbox.  It sets up an array of the results, json_encodes them, and returns them back to the original page.  Then, I need to populate the page with the results (with php).</p>
  
  <h2>The Textbox</h2>
  
  <pre><code>&lt;input type="text" onKeyUp="delay_method('search_customer',search_customer(this.value),'2000')" /&gt;
  </code></pre>
  
  <h2>The delay function</h2>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function delay_method(label,callback,time){
      if(typeof window.delayed_methods=="undefined"){window.delayed_methods={};}  
      delayed_methods[label]=Date.now();
      var t=delayed_methods[label];
      setTimeout(function(){ if(delayed_methods[label]!=t){return;}else{  callback();}}, time||500);
    }
  &lt;/script&gt;
  </code></pre>
  
  <h2>The ajax function</h2>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  function search_customer(value){    
  
  console.log(value); 
  
      $.ajax({
    type: "POST",
    url: "secondpage.php",
    data: query,
    dataType: 'json',
    success: function(data){
      console.log(data.name); // customer name
      console.log(data.company);   // customer company name
    }
  });
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <h2>second page</h2>
  
  <p>set up an array for testing.  Bypassing the query for now.  Just need to get results back into main page.  I can set up the array from the php once its working.  My query will use <code>LIKE %search text%</code></p>
  
  <pre><code>$arr = array(
    'name'=&gt;'overflow',
    'company'=&gt;'value'
  );
  echo json_encode($arr);
  </code></pre>
  
  <p>I have NO clue how to retrieve the data from the ajax function and populate the results.  I would love to get the results back into a php array, and then loop through the array to echo out the results.  I can loop through the array in php...<strong>my biggest concern is getting the results back into a php array.</strong></p>
  
  <p>Any assistance would be great.  I cant seem to get the code to work.  I am new to ajax so I'm learning this as I go.</p>
  
  <hr>
  
  <hr>
  
  <hr>
  
  <hr>
  
  <h2>UPDATE</h2>
  
  <p>Everything is working the way it should except the delay.  Its not putting a delay on anything.  I need it to wait for 2 seconds from each keyup before it activates the ajax function.  If it receives another keyup, it waits an additional 2 seconds.  IT continues until there is 2 seconds with no keyups.  That way its not querying the database on every single keyup if the person is still typing.  Right now its processing everything with each keyup.</p>
  
  <p>textbox</p>
  
  <pre><code>&lt;input type="text" onKeyUp="delay_method('search_customer',search_customer(this.value),'2000')" /&gt;
  </code></pre>
  
  <p>delay</p>
  
  <pre><code>function delay_method(label,callback,time){
      if(typeof window.delayed_methods=="undefined"){window.delayed_methods={};}  
      delayed_methods[label]=Date.now();
      var t=delayed_methods[label];
      setTimeout(function(){ if(delayed_methods[label]!=t){return;}else{  callback();}}, time||500);
    }
  </code></pre>
  
  <p>ajax function</p>
  
  <pre><code>function search_customer(value){    
  
  console.log(value); 
  
      $.ajax({
    type: "POST",
    url: "secondpage.php",
    data: { "value": value },
    dataType: 'html',
    success: function(data){
        $('#resultDiv').html(data);
    }
  });
  }
  </code></pre>
  
  <p>second page:</p>
  
  <pre><code>$value = $_POST['value'];
  
  if ((isset($value)) &amp;&amp; ($value != "")) { 
  $arr = array();
  $search_query = $db1q-&gt;query("SELECT first_name, company FROM Users WHERE first_name LIKE '%$value%' OR last_name LIKE '%$value%' OR company LIKE '%$value%'");
  if ($search_query-&gt;num_rows &gt; 0) {
  
      while ($search_result = $search_query-&gt;fetch_assoc()) {
  $arr[$search_result['first_name']] = $search_result['company'];
      }
  }
  
     $html = '';
      $html .= '&lt;div&gt;';
      foreach ($arr as $key =&gt; $value) {
          $html .= '&lt;div class="sub-div"&gt;&lt;h2&gt;'.$key.'&lt;/h2&gt; : ' . '&lt;h4&gt;' . $value . '&lt;/h4&gt;&lt;/div&gt;';
      }
      $html .= '&lt;/div&gt;';
  
  echo $html;
  }
  </code></pre>