在 JQuery 自动完成填充输入字段后调用新函数

Posted 2023-05-08

【中文标题】在 JQuery 自动完成填充输入字段后调用新函数

【英文标题】：Call a new function after JQuery Autocomplete populates input fields

【发布时间】：2019-08-21 08:24:40

【问题描述】：

我遇到以下问题。我有一个表单，用户在其中选择带有 JQuery 自动完成功能的项目。用户选择项目后，该函数会使用从 Ajax 调用返回的值自动填充这些输入字段：itemDescriptionSales、itemQuantity、itemPrice、itemPriceTotal。填充所有这些字段后，我需要调用一个新函数 recalcuateTotal 以根据输入字段中的值重新计算总价格。问题是函数recalculateTotal 在所有输入字段填充值之前被调用。我尝试使用以下代码调用该函数，但显然它不起作用。

$( ".itemCode" ).on( "autocompleteselect", function(  ) 

    recalculateTotal();
 );

我还尝试实现setTimeout(recalculateTotal, 1000)，这会延迟函数调用。我相信这不是正确的方法。有人有什么建议可以解决这个问题吗？我有以下自动完成功能的代码。任何帮助将不胜感激！

$( function() 

$( ".itemCode" ).autocomplete(
  source: function( request, response ) 
    $.ajax( 
      url: "items-search.php",
      dataType: "json",
      data: 
        term: request.term
      ,
      success: function( data ) 
        response( data );
      
     );
  ,
  minLength: 3,
  select: function( event, ui ) 

      $(this).parent().siblings().children(".itemDescriptionSales").val(ui.item.itemDescriptionSales);
      $(this).parent().siblings().children(".itemQuantity").val(ui.item.itemQuantity);
      $(this).parent().siblings().children(".itemPrice").val(ui.item.itemPrice);
      $(this).parent().siblings().children(".itemPriceTotal").val((ui.item.itemPrice)*(ui.item.itemQuantity));

    ,

 );

 );

【参考方案1】：

填充新值后，只需在 select 回调中调用它

select: function(event, ui) 
  var $inputs = $(this).parent().siblings().children()
  $inputs.filter(".itemDescriptionSales").val(ui.item.itemDescriptionSales);
  $inputs.filter(".itemQuantity").val(ui.item.itemQuantity);
  $inputs.filter(".itemPrice").val(ui.item.itemPrice);
  $inputs.filter(".itemPriceTotal").val((ui.item.itemPrice) * (ui.item.itemQuantity));
  // values are updated so can calculate now
  recalculateTotal();