Auto Search using Php ajax - php

Question

while i am making the point of sale system i ran in to problem with the search.
when i enter the product code on the product code textbox it automatically Search and display product name and price in to the relevant textboxes using ajax and jquery and php. what i tried code i attached below. i didn't get any answer while i ran the code.please read the below code and get good solution for me as soon as possible.
Form Design
<div class="form-group">
<label for="" class="col-sm-2 control-label">Product Code</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="product_code" name="product_code" placeholder="Product Code" required>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">Product Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="product_name" name="product_name" placeholder="product_name " required>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">Price</label>
<div class="col-sm-10">
<input type="text" class="form-control price" id="price" name="price" placeholder="price" required>
</div>
</div>
AJAX
function getProductcode() {
$('#product_code').empty();
$("#product_code").keyup(function(e) {
var q = $("#product_code").val();
$.ajax({
type: 'POST',
url: '../php/project_module/get_purchase.php',
dataType: 'JSON',
async: false,
success: function(data) {
for (var i = 0; i < data.length; i++) {
$('#product_code').append($("<option/>", {
value: data[i].product_id,
text: data[i].product_name,
}));
}
data: {
product_code: $('#product_code').val()
},
}
},
error: function(xhr, status, error) {
alert(xhr.responseText);
//
}
});
}
**get_purchase.php**
$product_code = $_POST["product_code"];
$stmt = $conn->prepare("select product_id,product_name,barcode,category,description,warrenty,product_condition,price_retail,
price_cost,discount,reorderlevel,brand
from product where barcode = ?");
$stmt->bind_param("s", $product_code);
$stmt->bind_result($product_id,$product_name,$price);
if ($stmt->execute()) {
while ( $stmt->fetch() ) {
$output[] = array ("product_id"=>$product_id,"product_name"=>$product_name,"price_retail"=>$price);
}
echo json_encode( $output );
}
$stmt->close();

Answer 1

The data attribute is in the wrong place of the ajax configuration.
Here is a revised version
Add this to your HTML
<p id="output"></p>
And this as your getProductCode() definition
function getProductcode() {
$("#product_code").empty();
$("#product_code").keyup(function(e) {
var q = $("#product_code").val();
$.ajax({
type: "POST",
url: "../php/project_module/get_purchase.php",
dataType: "JSON",
data: { product_code: $("#product_code").val() },
success: function(data) {
if(typeof data === 'undefined'){
return
}
$("#output").val(data[0].product_id + " : " +data[0].product_name)
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
});
}
I pasted your code in my editor (VS Code) and it gave helpful syntax errors. Maybe it would be a good idea to look into editors with syntax highlighting and checking capabilities?