Jquery auto complete для динамически генерируемых текстовых полей

Я новичок в jquery, я работаю над веб-страницей, которая динамически генерирует текстовые поля с помощью средства autocomplete.

i тестировал $("#some").autocomplete(data); на каком-то статическом контенте, он отлично работал.

однако, когда я пытаюсь использовать тот же метод с динамически генерируемыми текстовыми полями, он не работает!

мой код выглядит следующим образом:

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

Спасибо, ребята, я покончил с этим с помощью справки.

теперь, еще одна проблема. Я загружаю массив (ввод в автозаполнение) с помощью вызова DWR. ниже

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

здесь проблема заключается в каждом вызове DWR в БД для получения массива!

Есть ли способ сохранить массив из DWR в глобальной переменной?

рассматривает

Ответ 1

Основная проблема, я думаю, заключается в том, что вы вызываете автозаполнение вне обработчика кликов. Таким образом, автозаполнение настраивается при загрузке страницы, а не при нажатии кнопки.

Чтобы устранить это, измените код для чтения:

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

    });
});

Теперь автозаполнение устанавливается на каждый новый элемент, а не один раз, в начале.

Ответ 2

Вам нужно добавить обработчик автозаполнения для каждого элемента при его добавлении. Элементы, которые не существуют при его применении при загрузке документа, никогда не будут применяться в противном случае. Кроме того, вам будет лучше создавать строку и вход отдельно. Поступая таким образом, вы можете просто использовать ссылку на вновь созданный вход и использовать его с плагином автозаполнения.

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

    });
});

Ответ 3

Некоторые мысли:

Где инициализируется счетчик?
Попробуйте оставить пробел между 'type' и 'name' атрибуты вашего теги ввода <input type='text' name='td_products... >, которые могут помешать вашему фильтру атрибутов startsWith соответствовать чему-либо.

Ответ 4

Самый простой способ - использовать:

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

внутри функции javascript, которая генерирует новый элемент.

Ответ 5

Вы добавляете новый ввод, когда вы нажимаете #button_newproduct, но вы добавляете только автозаполнение один раз в функцию, вне клика.

Проверить jquery live