Question

我有一个webform，表中每一行中的一个字段都有一个Jquery AutoComplete函数，这很好用。我还使用ajax调用动态地向该表添加行。问题是我似乎无法让自动完成工作在动态添加的行（textBox）上。基于google“all”我需要做的是将.autocomplete添加到添加的字段中。我尝试了不同的变种，似乎jquery无法找到要添加的字段吗？

添加行代码：

$(".btnAddRow").click(function(){
var count = $(this).closest('.AgensDiv').children('.count').val();
var tab = $(this).closest('tr').find('.tab').val();

count++;

$.ajax({
    url: "tblRow.php", 
    type: "POST",
    dataType: "HTML",
    data: {"count": count,
        "tab": tab},
    success: function(result){
        //console.log(result);  
        $("#agensTbl tr:last").before(result);

    }});    
$(this).closest('.AgensDiv').children('.count').val(count);             
});

自动填充代码：

$(".legemiddel" ).autocomplete({
source: function( request, response ) {
    $.ajax({
        url: "AgensSok.php",
        type: "POST",
        dataType: "json",
        data: {"Virkestoff": request.term},
        success: function(data){
            response(data);
            //console.log(data);
        },
        error: function(error){
             console.log("Error:");
             console.log(error);
        }
    });
},
minLength: 3,
select: function( event, ui ) {
    $(this).closest('tr').find('.atc').val(ui.item.id);
    //$("#testAjax").val(ui.item.id);
 },
 open: function() {
   $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
 },
 close: function() {
   $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
 }
});

尝试了添加自动填充的不同变体，或只是更改新添加的行中文本框的值

$("#agensTbl tr:last").prev().find(".legemiddel").val("popp");

更改新添加的行和

之前的行的值

$("#agensTbl tr:last").find(".legemiddel").val("popp");

不起作用 haw尝试添加自动完成代码，但我猜测问题是访问新添加的行。还尝试给新文本框一个唯一的ID来测试。没有成功。

那么如何访问添加的行成员？或者有没有办法将自动完成添加到更高级别？（document.body）我希望使用autoComplete的textBoxes haw the class“legemiddel”

Answer 1

所以我将自动完成代码更改为以下内容，这似乎有效。

$(document).on("keydown.autocomplete", ".legemiddel", function(e){
$(this).autocomplete({
source: function( request, response ) {
    $.ajax({
        url: "AgensSok.php",
        type: "POST",
        dataType: "json",
        data: {"Virkestoff": request.term},
        success: function(data){
            response(data);
            //console.log(data);
        },
        error: function(error){
             console.log("Error:");
             console.log(error);
        }
    });
},
minLength: 3,
select: function( event, ui ) {
    $(this).closest('tr').find('.atc').val(ui.item.id);
    //$("#testAjax").val(ui.item.id);
},
open: function() {
  $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
  $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});

php Jquery Ajax自动完成动态添加文本框

1 个答案: