php Jquery动态Ajax自动完成添加的文本框 - php Jquery Ajax autocomplete for dynamicaly added textbox

php Jquery Ajax autocomplete for dynamicaly added textbox

本文关键字：添加文本 Jquery 动态 Ajax php | 更新日期: 2023-09-27

我有一个网络表单，其中表的每一行中的一个字段都有Jquery自动完成功能，这很好。我还通过ajax调用将行动态添加到该表中。问题是，我似乎无法让自动完成程序处理动态添加的行（textBox）。基于谷歌，我所需要做的就是在添加的字段中添加.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尝试添加自动完成代码，但我猜问题出在访问新添加的行上。还尝试为新的文本框提供一个uniqe ID以进行测试。没有成功。

那么，我如何访问添加的行成员呢？或者有没有办法将自动完成添加到更高的级别？（document.body）我希望在类"legemidel"上使用autoComplete的所有文本框

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

$(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" );
}
});
});