0

I have an AJAX function that calls a php function to search a mysql database. The script fires off on keyup and the problem is on the first key press the html content is updated but it will not update after the initial keyup event

How do I make the page continuously update the html content with the new data that is coming in after every keyup.

My AJAX function, 

var searchPath = "<?php echo $searchPath ?>"; 

$("#itemID").keyup(function (){
    var itemID = $(this).val();
    var url = searchPath;
    $.ajax({
        type  : "GET",
        async : false,
        url   : url,
        data  : "itemID=" + encodeURIComponent(itemID),
        cache : false,
        success: function(html) {
              $('#loader_image').hide();
           $( "#productResults" ).replaceWith( html );

              if (html === "") {
                  $("#loader_message").html('<p>There were no results that match your search criteria</p>').show();
              } else {
                  $("#loader_message").html('Searching... Please wait <img src="http://www.example.com/monstroid/wp-content/uploads/2016/02/LoaderIcon.gif" alt="Loading">').show();
              }
              window.busy = false;
        }
      });
});

And this is the php behind it all, 

<?php
require_once ('Dbconfig.php');
  $sql=" SELECT * FROM wuno_inventory WHERE wuno_product like '%".$itemID."%' OR wuno_alternates like '%".$itemID."%' ORDER BY wuno_product ";
try {
  $stmt = $DB_con->prepare($sql);
  $stmt->execute();
  $results = $stmt->fetchAll();
} catch (Exception $ex) {
  echo $ex->getMessage();
}
if (count($results) > 0) {
  foreach ($results as $res) {
    echo '<tr class="invent">';  
    echo '<td>' . $res['wuno_product'] . '</td>';  
    echo '<td>' . $res['wuno_alternates'] . '</td>';  
    echo '<td>' . $res['wuno_description'] . '</td>';  
    echo '<td>' . $res['wuno_onhand'] . '</td>';  
    echo '<td>' . $res['wuno_condition'] . '</td>';  
    echo '</tr>';   
  }
}
?>
wuno
  • 9,547
  • 19
  • 96
  • 180
  • 1
    Create a single string using concatenation operator `.` and `echo` it at the end. – Tushar Feb 16 '16 at 03:50
  • The end of what? I am sorry man i am not sure where you mean for me to put it. And you mean this, . echo ' '; ?? – wuno Feb 16 '16 at 03:51
  • Might not be the cause but, you should use a timer to know when the user is done typing, you probably do not want to send a request after *every* keystroke, if the person types fast and inputs much text you could cause problems, especially since when sending multiple requests like that, there is no guarantee they will be resolved in the same order they were requested – Wesley Smith Feb 16 '16 at 03:59
  • My goal was to have it show results as the user types. So as they get closer to the end of the typing it would already have the result in the list. How would you suggest to accomplish that? – wuno Feb 16 '16 at 04:00
  • I would suggest that you dont honestly. It sounds cool until you start getting unexpected results as mentioned above, typically, with this type of thing, we wait until the user has stopped typing for .5 - 1 seconds then fire off the request. See [this question](http://stackoverflow.com/questions/17029211/how-to-add-a-wait-timer-on-an-input-field-keyup-event) for an example of such a timer – Wesley Smith Feb 16 '16 at 04:03
  • Ok cool man. When I press one key it puts it all in ABC order from firs to last. Regardless of what key is pressed. I think its my query is not getting to keyword so its just putting the table in order? Would you mind taking a look to see if you can tell why any key executes the script putting the whole list in order? – wuno Feb 16 '16 at 04:08

0 Answers0