【问题标题】:Jquery autocomplete not populating in other fieldsJquery自动完成未填充在其他字段中
【发布时间】:2014-01-10 21:16:09
【问题描述】:

场景: 我有一个下拉列表,用户可以在其中选择供应商。根据他们选择的供应商,用户可以使用纸张搜索(使用 JQuery 自动完成)搜索项目。选择一个项目后,descriptionpriceper_pack 文本框将填充该特定项目的相关信息(此信息来自我的数据库)。

这是它目前的样子:

问题: 当用户从纸质搜索中选择一个项目时,上述文本框没有填充相关信息,我不知道为什么会发生这种情况。有谁知道这是为什么?

这是论文搜索的代码:

$(function() {
window.globalVar = 0;

// Skip the filled description boxes
for (var i=0; i<10; i++)
{
    if($('#description_'+window.globalVar).val() != "")
    {
        window.globalVar++;
    }
}

// Write the paper description and price for the selected paper
function log( message ) {
    var values = message.split('|');
    $('#description_'+window.globalVar).val(values[0]);
    $('#priceper_'+window.globalVar).val(values[1]);
$('#per_pack_'+window.globalVar).val(values[2]);
    window.globalVar++;
    console.log(window.globalVar);
}

// Search the Paper db
$( "#supplier_search" ).autocomplete({
  source: function( request, response ) {
    $.ajax({
      url: "http://mpc.vario/mis_pp/common/pp_json",
      dataType: "jsonp",
      data: {
        featureClass: "P",
        style: "full",
        maxRows: 25,
        name_startsWith: request.term,
        supplier: $('#supplier').val()
      },
      success: function( data ) {
        console.log(data);
        response( $.map( data, function( item ) {
          return {
            label: item.name,
            value: item.name + '|' + item.value + '|' + item.pack
          }
        }));
      }
    });
  },
  minLength: 2,
  select: function( event, ui ) {
    log( ui.item.value );
    $(this).val('');
    return false;
  },
  open: function() {
    $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-stop" );
  },
  close: function() {
    $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
  }
});
 });

这是添加/删除行的代码:

 $(document).ready(function () {
    $counter = 1;
    $('#buttonadd').click(function () {
        $counter++;
        $('#invoiceitems > tbody:last').append('<tr><td><input type="button" class="buttondelete" value="Delete"/></td>\
        <td><input type="text" name="item[' + $counter + '][description]" id="description_" class="description" size="85" maxlength="70" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][priceper]" id="description_" class="priceper" size="10" maxlength="9" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][per_pack]" id="per_pack_" class="per_pack" size="10" maxlength="9" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][quantity]" id="quantity_" class="quantity" size="10" maxlength="9" value="" /></td>\
        <td><label class="subtotal"></label></td></tr>');

    });
    $('table#invoiceitems').on('keyup', '.quantity , .priceper',function () {
        UpdateTotals(this);
    });

    $counter = 1;
       $('table#invoiceitems').on('click','.buttondelete',function () {
        $counter++;
        if($('table#invoiceitems tbody tr').length==1){
            alert('Cant delete single row');
            return false;
        }
        $(this).closest('tr').remove();

    });
    CalculateSubTotals();
    CalculateTotal();
    });

【问题讨论】:

  • 您是说问题是删除项目后,添加项目时值不会进入文本框吗?或者你是说删除一个项目后,值搞砸了?
  • 我想我没有很好地解释自己:S 在我集成添加和删除功能之前,我能够从论文搜索中选择一个项目,并且值会轻松地出现在文本框中。但是,在修改我的代码以便我能够让用户删除和添加更多项目之后,这些值不再出现在文本框中。如果我从搜索中选择一个项目,则不会发生任何事情@ovaherenow
  • @rache_r 请添加您的 javascript 以添加和删除行
  • 请在@CSL上方找到添加和删除行的代码

标签: javascript jquery html autocomplete


【解决方案1】:

查看详细信息字段的数量取决于“行号”(通过 window.globalVar)

确保在删除和添加新订单项时重新计算“有效”行。

设置字段值的代码是这个部分:

 $('#description_'+window.globalVar).val(values[0]);
 $('#priceper_'+window.globalVar).val(values[1]);
 $('#per_pack_'+window.globalVar).val(values[2]);

在您从下拉列表中选择和项目时,调试您的 javascript 并检查 window.globalVar 的值。您很可能会发现该值不正确,并且您正在尝试设置文档中不存在的控件的值。

【讨论】:

  • 这是为了在添加和删除新行项目时更新总计吗? @CSL
  • @rache_r Firefox 有一个名为 Firebug 的出色插件,但我倾向于使用 Google Chrome - 在您的页面上只需按 F12,它就会打开一个带有脚本调试器的窗口。可以设置断点、监视等。
  • 当我进入控制台部分时,在谷歌浏览器开发工具上,所有显示的是数组 [25],然后是数字 11。@CSL
  • @rache_r 数字 11 最有可能来自这一行 console.log(window.globalVar) - 因此您的文档中是否有 id='#description_11' 的控件?
  • 我没有 id='#description_11' @CSL 的控件
【解决方案2】:

window.globalVar确实试图将其值设置为不存在的控件。

更新的有效代码:

    $(function() {
    window.globalVar = 1;

    // Write the paper description and price for the selected paper
    function log( message ) {
        var values = message.split('|');
        $('#description_'+window.globalVar).val(values[0]);
        $('#priceper_'+window.globalVar).val(values[1]);
    $('#per_pack_'+window.globalVar).val(values[2]);
        console.log(window.globalVar);
    }

    // Search the Paper db
    $( "#supplier_search" ).autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "http://mpc.vario/mis_pp/common/pp_json",
          dataType: "jsonp",
          data: {
            featureClass: "P",
            style: "full",
            maxRows: 25,
            name_startsWith: request.term,
            supplier: $('#supplier').val()
          },
          success: function( data ) {
            console.log(data);
            response( $.map( data, function( item ) {
              return {
                label: item.name,
                value: item.name + '|' + item.value + '|' + item.pack
              }
            }));
          }
        });
      },
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item.value );
        $(this).val('');
        return false;
      },
      open: function() {
        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-stop" );
      },
      close: function() {
        $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
      }
    });
    });

$(document).ready(function () {
    $counter = 1;
    $('#buttonadd').click(function () {
        $counter++;
        $('#invoiceitems > tbody:last').append('<tr><td><input type="button" class="buttondelete" value="Delete"/></td>\
        <td><input type="text" name="item[' + $counter + '][description]" id="description_' + $counter + '" class="description" size="85" maxlength="70" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][priceper]" id="priceper_' + $counter + '" class="priceper" size="10" maxlength="9" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][per_pack]" id="per_pack_' + $counter + '" class="per_pack" size="10" maxlength="9" value="" /></td>\
        <td><input type="text" name="item[' + $counter + '][quantity]" id="quantity_' + $counter + '" class="quantity" size="10" maxlength="9" value="" /></td>\
        <td><label class="subtotal"></label></td></tr>');
    window.globalVar = $counter;

    });
    $('table#invoiceitems').on('keyup', '.quantity , .priceper',function () {
        UpdateTotals(this);
    });

    $counter = 1;
       $('table#invoiceitems').on('click','.buttondelete',function () {
        $counter++;
        if($('table#invoiceitems tbody tr').length==1){
            alert('Cant delete single row');
            return false;
        }
        $(this).closest('tr').remove();
    UpdateTotals(this);

    });
    CalculateSubTotals();
    CalculateTotal();
    });

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-11-14
    • 2011-02-01
    • 2016-07-02
    • 2015-10-25
    • 2018-01-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多