使用AJAX进行Keyup上的搜索功能

Question

For the first time ever I am trying to get a search function written. I am using a AJAX function to call the php file on key up. This is performing weirdly because it is changing the content in the content area but it is not the correct content.

I am also using ajax to load data from the table to the same content area. My goal is that when you search it replaces the data being viewed with the most relevant data based on the criteria you have provided by that last keyup.

This is my search form

<div class="form-group pull-right">
                    <input type="text" name="itemID" id="itemID" class="search form-control" placeholder="Search product number">
            </div>

This is the AJAX function,

$("#itemID").keyup(function (){
jQuery.ajax({
          type: "GET",
          async: false,
          url: searchPath,
          data: itemID,
          cache: false,
          success: function(html) {
            $("#productResults").append(html);
        $("#productResults").html(html);    
            $('#loader_image').hide();
            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.wuno.com/monstroid/wp-content/uploads/2016/02/LoaderIcon.gif" alt="Loading">').show();
            }
            window.busy = false;
          }
        });
});

And this is my php search query

    $sql=" SELECT * FROM wuno_inventory WHERE wuno_product like '%".$itemID."%' OR wuno_product like '%".$itemID."%'";
    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>';   
  }
}

Answer 1

change

url: searchPath,
  data: itemID,

to

url: your_php_address_file,
 data: {itemID:$(this).val()}

Answer 2

Change your searchpath with valid url address below

 $("#itemID").keyup(function (){ var itemID = $(this).val(); var url = 'your searchpath here'; $.ajax({ type : "GET", async : false, url : url, data : "itemID=" + encodeURIComponent(itemID), cache : false, success: function(html) { $('#loader_image').hide(); $("#productResults").html(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.wuno.com/monstroid/wp-content/uploads/2016/02/LoaderIcon.gif" alt="Loading">').show(); } window.busy = false; } }); }); 

Note : using queries like that may cause sqlinjection so be carefull with these sql statements '%".$itemID."%'