Как я могу использовать эту функцию автозаполнения из json с динамически созданными входами?

1

Я использую эту функцию автозаполнения, которая берет значение из ввода descricaoItem(description), отправляет его в запрос и заполняет другое поле ввода значением codigo(code) из базы данных. Код ниже:

$(document).ready(function() {          

            $('#descricaoItem0').change(function () {

            $.post('mandaDescricao.php',
                {
                   descricao: document.getElementById('descricaoItem0').value
                },     

                    function(data){
                        var obj = $.parseJSON(data);
                        $('#codigoItem0').val(obj.codigo); 

                    });   
                });         
        });

Это хорошо работает, но я хочу динамически создавать эти входы, когда пользователь нажимает кнопку. Уже есть эта функция, и входы создаются с разными ID (descricaoItem0, descricaoItem1 и т.д.), descricaoItem1 связаны с (codigoItem0, codigoItem1 ,...). Но при динамически создаваемых входах я не могу найти способ использовать указанную выше функцию.

Не могли бы вы мне помочь? Я не хочу копировать и вставлять эту функцию 'до descricaoItem20.

  • 0
    Если вы создаете input динамически, вы должны убедиться, что добавили обработку событий после того, как input были созданы и обработаны в DOM. Я не могу точно сказать, что это проблема, но это то, что нужно рассмотреть.
Теги:
dynamic

3 ответа

0
Лучший ответ

Оберните свой объект назначения в функцию! Каждый раз, когда добавляется новый вход, запускайте эту функцию и передавайте правильный номер идентификатора.

function assignOnChangeToInput(id) {
  $('#descricaoItem' + id).change(function() {

    $.post('mandaDescricao.php', {
        descricao: document.getElementById('descricaoItem' + id).value
      },

      function(data) {
        var obj = $.parseJSON(data);
        $('#codigoItem' + id).val(obj.codigo);

      });
  });
});
}
  • 0
    Это простое решение сработало как шарм, спасибо большое!
  • 0
    Не за что, было бы неплохо, если бы был голос против :-)
Показать ещё 3 комментария
1
  1. Создайте объект JSON, который состоит из массива входных объектов.
[ {id: '#codigoItem0'}, {id: '#codigoItem1'}, {id: '#codigoItem2'} ]
  1. Используйте цикл forEach для применения прослушивателя событий изменений к каждому отдельному узлу.
var JSONObj =  [ {id: '#codigoItem0'}, {id: '#codigoItem1'}, {id: '#codigoItem2'} ]

JSONObj.forEach(function(input) {
  var id = input.id;

  $(id).change(function(e) {
    $.post('mandaDescricao.php',
      {
         descricao: document.getElementById(id).value
      },

      function(data){
        var obj = $.parseJSON(data);
        $(id).val(obj.codigo); 

      });
    });  
  })
})

Возможно, стоит сделать более подробный массив JSON для ввода, в котором может выглядеть объект ввода-объекта:

{
  id: 'inputID',
  name: 'inputName'
  val: 'Foo',
  placeholder: 'Bar',
  callback: '_aCallbackMethod()'
}

И тогда вы можете создавать элементы ввода на основе массива этих подробных входов и обрабатывать их как объекты, а не требовать много запросов к DOM с помощью $ (blah). :-)

  • 0
    Мне нравится, как вы подошли к этому очень систематически. Тем не менее он должен выполняться только тогда, когда пользователь добавляет новый ввод на страницу, как указано в вопросе.
  • 0
    Спасибо и правда - мне нужно работать над чтением запроса в полной мере, прежде чем ответить. :-)
0

Вам не нужно использовать идентификатор (который поможет с вашей динамической проблемой). Вы можете добавить событие ко всем входам с классом, а затем использовать this внутри события изменения ввода для ввода, с которым пользователь взаимодействует, например

<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />

$(document).ready(function() {

  $('.descricaoItem').on("input", function() {
    var descricaoValue = $(this).val();
    var self = this; // save context of this
    $.post('mandaDescricao.php', {
        descricao: descricaoValue
      },
      function(data) {
        var obj = $.parseJSON(data);
        $(self).val(obj.codigo);
      });
  });
});

Вот минимальный пример (без запроса POST)

$(document).ready(function() {
  $('.descricaoItem').on("input", function() {
    var descricaoValue = $(this).val();
    var self = this; // save context of this
    $(self).val("codigo obj: " + Math.floor(Math.random() * 100) + 1);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />
<input class="descricaoItem" />

Ещё вопросы

Сообщество Overcoder
Наверх
Меню