如何使表单自动完成功能动态化 [英] How to make autocomplete for form dynamic

问题描述

我无法在动态创建的输入中使用自动完成功能.我无法自动完成以绑定到新输入.

i have trouble using autocomplete with dynamic created input. I can't get autocomplete to bind to the new inputs.

我在第一个输入中使用的代码自动完成功能

This code autocomplete I used on the first input

$(function() {
  $( '#nama-0').autocomplete({
    source: "get_barang.php",
    minLength: 2,
    select: function( event, ui ) {
      $('#kode-0').val(ui.item.kode);
      $('#harga-0').val(ui.item.harga);
    }
  });
});

和带有输入的新表行:

 $('#tambah').click(function() {

  var i = $('input').size() + 1,
  input = '<tr id="box' + i + '">';
  input += '<td><input id="nama-' + i + '" name="nama_input[]" autocomplete="off" class="nama form-control" /></td>';
  input += '<td><input id="kode-' + i + '" name="kode_input[]" readonly="readonly" class="form-control" /></td>';
  input += '<td><input id="harga-' + i + '" name="harga_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>';
  input += '<td><input id="jumlah-' + i + '" name="jumlah_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>';
  input += '<td><input id="total-' + i + '" name="total_input[]" class="total form-control" readonly="readonly" /></td>';
  input += '<td><button id="hapus" class="btn btn-default"><b>Hapus</b></button></td>'
  input += '</tr>';

  $('#box').append(input);


  i++;
  return false;


});

我认为问题是我猜问题出在使用动态输入id属性.如何编写动态输入的ID，并将其应用到自动填充中?任何帮助表示赞赏.

i think the problem I guess the problem is in the use of dynamic input id attribute. how to write id of dynamic input, and apply them in autocomplete? any help appreciated.

推荐答案

您的问题是，当您尝试在DOM上初始化自动完成功能时，#nama-N元素不存在于DOM中.

Your issue is because the #nama-N element doesn't exist in the DOM when you try to initialise the autocomplete function on it.

要解决此问题，请在调用append()之后将您的第一段代码移动到点击处理程序中.试试这个:

To fix this, move your first block of code inside the click handler, after append() has been called. Try this:

$('#tambah').click(function(e) {
  e.preventDefault();

  var i = $('input').size() + 1;
  var input = '<tr id="box' + i + '">';
  input += '<td><input id="nama-' + i + '" name="nama_input[]" autocomplete="off" class="nama form-control" /></td>';
  input += '<td><input id="kode-' + i + '" name="kode_input[]" readonly="readonly" class="form-control" /></td>';
  input += '<td><input id="harga-' + i + '" name="harga_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>';
  input += '<td><input id="jumlah-' + i + '" name="jumlah_input[]" type="number" autocomplete="off" class="hitung form-control" /></td>';
  input += '<td><input id="total-' + i + '" name="total_input[]" class="total form-control" readonly="readonly" /></td>';
  input += '<td><button id="hapus" class="btn btn-default"><b>Hapus</b></button></td>'
  input += '</tr>';

  $('#box').append(input);

  // attach autocomplete here as the element now exists in the DOM
  $('#nama-' + i).autocomplete({
    source: "get_barang.php",
    minLength: 2,
    select: function(event, ui) {
      $('#kode-0').val(ui.item.kode);
      $('#harga-0').val(ui.item.harga);
    }
  });
});

这篇关于如何使表单自动完成功能动态化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！