使用自动选择填充表单域答案

【问题标题】：Using Autoselect to populate form fields使用自动选择填充表单域
【发布时间】：2013-12-10 23:37:02
【问题描述】：

我正在尝试创建一个 php 表单，它使用自动选择来选择一个项目，并从该选择中填充价格输入字段，然后填充小计和总计字段。

我有一个名为“附件”的表，其中包含以下字段：

accessories_id |配件名称 |配件价格

我可以让第一个自动选择工作，但我不知道从那里去哪里。我可以使用 php，但使用 Javascript 我是个新手，不知道从哪里开始。

html 文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Autocomplete</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

<script type="text/javascript">
$(document).ready(function(){
$("#accessories_name").autocomplete({
source:'getautocomplete.php',
minLength:1
});
});

$("#accessories_name").autocomplete({
  source:'getautocomplete.php',
  minLength:1,
  change: function( event, ui ) {}
});


$( "#accessories_name" ).on( "autocompletechange", function( event, ui ) {
   $("accessories_price").val(ui.item.value); //sets price with the value from selected accessory
   // [...] other fields logic
} );

$( "#quantity" ).change(function() {
   var subtotal = $("#accessories_price").val() * $("#quantity").val(); //don't forget to verify if are numbers
   $("#subtotal").val(subtotal);
})
</script>

</head>
<body>
  <form method="post" action="">
  Name : <input type="text" size="40" id="accessories_name" name="accessories_name" />
  Price: <input type="text" size="30" id="accessories_price" name="accessories_price" />
  Quantity: <input type="text" size="30" id="quantity" name="quantity" />
  Subtotal: <input type="text" size="30" id="subtotal" name="subtotal" />
  <br />
  Name : <input type="text" size="40" id="accessories_name" name="accessories_name" />
  Price: <input type="text" size="30" id="accessories_price" name="accessories_price" />
  Quantity: <input type="text" size="30" id="quantity" name="quantity" />
  Subtotal: <input type="text" size="30" id="subtotal" name="subtotal" />
  <br />
  Total: <input type="text" size="40" id="accessories_total" name="accessories_total" />
  </form> 
</body>
</html>

php 文件

<?php
mysql_connect("localhost", "db_user", "password");
mysql_select_db("db");
$term=$_GET["term"];
$query=mysql_query("SELECT * FROM accessories WHERE accessories_description LIKE '%".$term."%' ORDER by accessories_description");
$json=array();
while($accessories=mysql_fetch_array($query)){
     $json[]=array(
                'value'=>$accessories["accessories_name"],
                'label'=>$accessories["accessories_name"]." - ".$accessories["accessories_id"]
                );
}
echo json_encode($json);
?>

【问题讨论】：

标签： javascript php jquery autocomplete jquery-autocomplete

【解决方案1】：

首先你需要通过在autocomplete中添加change回调来初始化它：

   $("#accessories_name").autocomplete({
      source:'getautocomplete.php',
      minLength:1,
      change: function( event, ui ) {} //add this to your current autocomplete
   });

在您需要为change 回调创建侦听器之后，一旦在自动完成字段中选择了一个选项，它将被调用。在此侦听器中，您将拥有更新价格和其他字段的代码：

   $( "#accessories_name" ).on( "autocompletechange", function( event, ui ) {
       $("accessories_price").val(ui.item.value); //sets price with the value from selected accessory
       // [...] other fields logic
   } );

对于autocomplete 以外的字段，您可以使用 jquery .change() 方法，例如在“#quantity”的情况下：

   $( "#quantity" ).change(function() {
       var subtotal = $("#accessories_price").val() * $("#quantity").val(); //don't forget to verify if are numbers
       $("#subtotal").val(subtotal);
   })

在$(document).ready({}) 事件中添加此代码以及您的逻辑所需的更改，并注意第二个和其他配件的 ID

【讨论】：

感谢@G.Mendes 但它似乎仍然无法正常工作，我已经更新了上面的代码。
尝试使用我建议的更改而不是添加新块来实际更新第一个 .autocomplete()，而且您还有第二个具有相同 ID 的附件块。 javascript代码也需要在$(document).ready({})事件中，如有问题请回复