Question

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

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

accessories_id | accessories_name | accessories_price

我可以让第一个自动选择工作，但我不知道从那里去哪里。我很好用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);
?>

Answer 1

首先，您需要通过在change中添加autocomplete来初始化$("#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

对于.change()以外的字段，您可以使用jquery $( "#quantity" ).change(function() { var subtotal = $("#accessories_price").val() * $("#quantity").val(); //don't forget to verify if are numbers $("#subtotal").val(subtotal); })方法，例如'＃quantity'大小写：

$(document).ready({})

在{{1}}事件中添加您的逻辑所需的更改代码，并小心第二和其他配件的ID

使用“自动选择”填充表单域

1 个答案: