Функция поиска на клавиатуре с AJAX

Question

Впервые я пытаюсь получить функцию поиска. Я использую функцию AJAX для вызова php-файла на клавиатуре. Это странно связано с тем, что оно меняет контент в области содержимого, но это не правильный контент.

Я также использую ajax для загрузки данных из таблицы в одну и ту же область содержимого. Моя цель состоит в том, что при поиске он заменяет просматриваемые данные наиболее релевантными данными на основе критериев, которые вы предоставили этой последней клавиатурой.

Это моя форма поиска

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

Это функция AJAX,

$("#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; 
      } 
     }); 
}); 

И это мой PHP поисковый запрос

$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

изменение

url: searchPath, 
    data: itemID, 

в

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

Answer 2

Изменение SearchPath с действительным адресом URL-адрес ниже

$("#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; 
 
     } 
 
     }); 
 
});

Примечание: с помощью запросов как это может привести к sqlinjection так быть осторожным с% этих операторов SQL» ". $ itemID."% '