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

Using Autoselect to populate form fields

本文关键字：填充 表单 字段 自动选择 选择 使用      更新时间：2024-05-16

我正在尝试创建一个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);
?>

首先，您需要通过将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以外的字段，您可以使用jquery .change()方法，如"#数量"情况，例如：

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

将此代码与$(document).ready({})事件中逻辑所需的更改一起添加，并小心来自第二个和其他访问的ID

相关文章：