Question

当我正在制作销售点系统时，我遇到了搜索问题。当我在产品代码文本框中输入产品代码时，它会自动使用ajax和jquery以及php在相关文本框中搜索并显示产品名称和价格。我试过的代码我附在下面。当我运行代码时，我没有得到任何答案。请阅读下面的代码并尽快为我找到好的解决方案。

表单设计

    <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

数据属性位于ajax配置的错误位置。

这是修订版

将此添加到您的HTML

<p id="output"></p>

这是你的getProductCode（）定义

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);
      }
    });
  });
}

我将您的代码粘贴到我的编辑器（VS Code）中，它提供了有用的语法错误。也许用语法高亮和检查功能来查看编辑器是个好主意吗？

使用Php ajax进行自动搜索

1 个答案: