Automatyczne wypełnianie jquery dla dynamicznie generowanych pól tekstowych

Question

Jestem nowy w jquery, pracuję na stronie internetowej, która wymaga dynamicznego generowania pól tekstowych przy pomocy narzędzia autocomplete.

Przetestowałem $("#some").autocomplete(data); na niektórych statycznych treściach, działało idealnie.

Jednak gdy spróbuję tej samej techniki z dynamicznie generowanymi polami tekstowymi, to nie działa!

mój kod wygląda następująco:

$(function() { 

    $("#button_newproduct").click(function(){ 
    $("#products_table > tbody").append(
     "<tr><td><input type='text'name='td_products["+counter+"]'/></td></tr>"); 
    }); 
    var data = "Core celectors cttributes craversing canipulation CSS cvents cffects cjax ctilities".split(" "); 
    $('input[name^=td_products]').autocomplete(data); 
}); 

dzięki chłopaki Skończyłem z tym z ur pomoc.

teraz kolejny problem. wczytuję tablicę (wejście do autouzupełniania) z call.as DWR poniżej

DwrService.populateProducts(someFunc); 
function someFunc(result){ 
    autoProducts=result; 
    input.autocomplete(result); 
} 

Problem polega każdym nawiązywaniu połączenia DWR DB uzyskać tablicę!

Czy istnieje sposób przechowywania tablicy z DWR w zmiennej globalnej?

pozdrowienia

Answer 1

Głównym problemem jest to, że wywołujesz autouzupełnianie poza obsługą kliknięcia. Tak więc autouzupełnianie jest konfigurowane podczas ładowania strony, a nie po kliknięciu przycisku.

Aby rozwiązać ten problem, zmień kod w brzmieniu:

$(function() { 

    $("#button_newproduct").click(function() { 

     var newItem = $("<tr><td><input type='text'name='td_products["+counter+"]'/></td></tr>"); 

     $("#products_table > tbody").append(newItem); 

     var data = "Core celectors cttributes craversing canipulation CSS cvents cffects cjax ctilities".split(" "); 
     newItem.find('input').autocomplete(data); 

    }); 
}); 

Teraz autocompletion jest ustawiony na każdej nowej pozycji, a nie raz na początku.

Answer 2

Niektóre myśli:

• Gdzie jest licznik inicjowane?
• Spróbuj pozostawiając przestrzeń pomiędzy „typu” i „” nazwy atrybutów swoich tagów wejściowych <input type='text' name='td_products... >, że może uniemożliwiać filtr atrybutu startsWith od dopasowania czegokolwiek.

Answer 3

Dodajesz nowe wejście, klikając #button_newproduct, ale dodajesz autouzupełnianie tylko raz w funkcji, poza kliknięciem.

Sprawdź jQuery live

Answer 4

Trzeba dodać obsługi autouzupełniania do każdego elementu, jak go dodać. Elementy, które nie istnieją podczas ładowania dokumentu, nigdy nie zostaną zastosowane w inny sposób. Poza tym lepiej byłoby utworzyć osobny wiersz i dane wejściowe. W ten sposób możesz po prostu użyć referencji do nowo utworzonego wejścia i użyć go z wtyczką autouzupełniania.

$(function() { 

    $("#button_newproduct").click(function(){ 
     var input = $("<input type='text' name='td_products["+counter+"]' />"); 
     var row = $('<tr />').append($('<td />').append(input)); 
     $("#products_table > tbody").append(row); 
     var data = "Core celectors cttributes craversing canipulation CSS cvents cffects cjax ctilities".split(" "); 
     input.autocomplete(data); 

    }); 
}); 

Answer 5

Najprostszym sposobem jest użycie:

$(".some").autocomplete({source: data}); 

wewnątrz funkcji javascript, który generuje nowy element.