Question

建立一个基本发票页面，我的第一个输入＆＃34;项目＆＃34;我得到了自动完成功能。并且知道当我选择和选项时，ajax可以将其他两个字段数据放入输入字段。不确定必须添加到我的代码或去哪里。感谢

...
<input type="text" placeholder="Item #1" class="form-control auto" id="auto"/>
<script type="text/javascript">
$(function() {

    //autocomplete
    $("#auto").autocomplete({
        source: "search1.php",
        minLength: 1
    });

});
</script>
</div>
<div class="col-md-6">
    <input type="text" placeholder="Description" class="form-control" />
</div>
<div class="col-md-1">
    <input type="text" placeholder="Qty." class="form-control" id="qty"/>
</div>
<div class="col-md-1">
    <input type="text" placeholder="Tax" class="form-control" />
</div>
<div class="col-md-2">
    <input type="text" placeholder="Item Total" class="form-control"id="itemprice"/>
</div>
...

这是我的php文件：

if (isset($_GET['term'])){
    $return_arr = array();

    try {
        $conn = new PDO("mysql:host=".DB_SERVER.";dbname=".DB_NAME, DB_USER, DB_PASSWORD);
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        $stmt = $conn->prepare('SELECT * FROM items WHERE item LIKE :term');
        $stmt->execute(array('term' => '%'.$_GET['term'].'%'));

        while($row = $stmt->fetch()) {
            $return_arr[] =  $row['item'];
            $return_arr[] =  $row['description'];
            $return_arr[] =  $row['price'];
        }

    } catch(PDOException $e) {
        echo 'ERROR: ' . $e->getMessage();
    }

    /* Toss back results as json encoded array. */
    echo json_encode($return_arr);
}
?>

Answer 1

您可以使用jQuery自动完成的select回调处理此问题。

 select: function(event, ui) {
        }

假设您返回一个数据数组，只需访问ui.item中的每个对象，然后定位其他输入字段。

select: function(event, ui) {
            $("#secondInput").val(ui.item.id);
            $("#thirdInput").val(ui.item.value);
        }

fiddle

Answer 2

做这样的事情：

$(document).on('change', '"#auto"', function(){
     var id = $(this).val();
     var $gty = $('#gty');
     var $itemPrice = $('#itemprice');
     $.ajax({
           url : '/myurl/info/' + id,
           type : 'POST',
           success : function(data){
              // fill inputs with data from ajax
              $qty.val(data.something);
              $itemprice.val(data.something);
           }
});

修改

我不认为其他答案会起作用，因为jquery ajax只返回一个text / value数组。它不会返回数量和项目价格，因此您将需要另一个ajax调用来获取用户从下拉列表中选择的特定项目的详细信息

自动完成以在选择时将返回数据输入3个字段

2 个答案:

修改