從一個文本域自動填充使用jQuery或JSON輸入另一個文本域

Question

我是AJAX和JSON的新手。我從最近三天開始嘔吐。基本上我有一個有五個文本字段的表單。如果用戶在文本字段中輸入項目名稱或項目標識，則其他文本字段將通過AJAX/JSON從數據庫自動填充。

形式像

<form> 
    <input type='text' name='item-id' /> 
    <input type='text' name='item-name' /> 
    <input type='text' name='quantity' /> 
    <input type='text' name='tax' /> 
    <input type='text' name='price' /> 

    <input type='submit' name='submit' value='submit'/> 
</form> 

此外，如果用戶增加數量字段，那麼所有其他字段應該自動更新，增加了價格和稅率。請指導我如何調用PHP腳本並更新這些字段。

Answer 1

將keypress事件綁定到item-name（或item-id）帶有一些超時（所以它在一段時間後自動提取數據，不需要按ENTER或任何其他確認鍵）並使用jQuery的Ajax API來獲取正確的數據。之後，使用Manipulation API將從ajax查詢獲取的正確值添加到其餘字段。

每頁底部都有很好的例子，所以一定要向下滾動！

事情是這樣的：

var updateTimeout = null; 

$("#item-name").keypress(function(event) { 
    if(updateTimeout != null) { 
     clearTimeout(updateTimeout); 
    } 

    updateTimeout = setTimeout(function() { 
     var item = $("#item-name").val() 
     autoFill(item); 
    }, 1000); // 1000 = 1s 
} 

function autoFill(itemName) { 
    $.ajax({ 
     type: "POST", 
     url: "myurl.php", 
     data: "name=" + itemName 
     dataType: "json", 
     success: function(data) { 
      $("#quantity").val(data["quantity"]); 
      $("#tax").val(data["tax"]); 
     }); 
}