jQuery自动完成与动态文本字段生成

我想使用jQuery自动完成与动态文本字段生成，自动完成工程，但主要问题是我不能用名称'alamat'正确填充文本字段。如何在自动完成中正确设置当前的textfield'alamat'值？jQuery自动完成与动态文本字段生成

HTML

<form id="myForm" name="myForm" method="post"> 
<table id="myTable" border="1" cellpadding="1" cellspacing="1"> 
    <thead> 
     <th>No</th><th>Nama</th><th>Alamat</th> 
    </thead> 
    <tbody></tbody> 
</table> 
<input id="addButton" name="addButton" type="button" value="Add an input" /> 
<input id="removeButton" name="removeButton" type="button" value="Remove an input" /> 
</form>

<script type="text/javascript"> 
var counter = 1; 
$(function() { 
    var options = { 
    source: 'autocomplete.php', 
    minLength: 2, 
    focus: function(event, ui) { 
      $('#nama_' + counter).val(ui.item.value);       
      $('#alamat_' + counter).val(ui.item.alamat); 
      console.log(ui.item.alamat);  
     }, 
     select: function(event, ui) { 
      $('#nama_' + counter).val(ui.item.value);       
      $('#alamat_' + counter).val(ui.item.alamat); 
      console.log(ui.item.alamat); 
     } 
    }; 

    $('input.searchNama').live("keydown.autocomplete", function() { 
     $(this).autocomplete(options); 
    }); 

    var addInput = function() { 
     if (counter > 1){ 
      $('input#removeButton').removeAttr('disabled'); 
     } 

     var inputHTML = ' <tr><td><div id="' + counter + '">'+ counter +'</div></td><td><input type="text" id="nama_' +counter + '" class="searchNama" name="nama_' + counter +' " value="" /></td><td><input type="text" id="alamat_' + counter + '" class="searchAlamat" name="alamat_' + counter + '" value="" /></td></tr>'; 
     $(inputHTML).appendTo("table#myTable tbody"); 
     $("input.searchNama:last").focus(); 
     counter++; 
    }; 

    var removeInput = function() { 
     counter--; 
     if(counter == 1){ 
      $('input#removeButton').attr('disabled','disabled'); 
      counter++; 
      console.log('Jika Counter == 1 :' + counter); 
     } else { 
      $("table#myTable tbody tr:last").remove(); 
      console.log('Jika Counter != 1 :' + counter); 
     } 
    }; 

    if (!$("table#myTable tbody").find("input.searchNama").length) { 
     addInput(); 
    } 

    $("input#addButton").click(addInput); 
    $("input#removeButton").click(removeInput); 
}); 
</script>

我autocomplete.php产生JSON结果

[{ 
    "label": "Aditya Nursyahbani - Jl. Bratasena IX Blok U6 No. 7", 
    "value": "Aditya Nursyahbani", 
    "alamat": "Jl. Bratasena IX Blok U6 No. 7" 
    }, 
{ 
    "label": "Slamet Aji Pamungkas - Jl. Melati 2 No. 3", 
    "value": "Slamet Aji Pamungkas", 
    "alamat": "Jl. Melati 2 No. 3" 
}]

我上传我的脚本上小提琴在这个link！

感谢先进。

来源

2013-12-09 Aditya Nursyahbani

$('input.searchAlamat').val(ui.item.alamat);

你的选择将填充包含在该页面class='searchAlamat'所有输入。

内select回调，this将是当前输入实例自动完成，势必让您可以很在行内穿越：

$(this).closest('tr').find('input.searchAlamat').val(ui.item.alamat);

DEMO

注意我删除focus功能

来源

2013-12-09 03:30:49 charlietfl

谢谢查理，你是摇滚！ –

随时批准答案Aditya – charlietfl

jQuery自动完成与动态文本字段生成

回答

相关问题