Блог

У меня есть автозаполнение, вложенное в jquery, который создает текстовые элементы «на лету». Автозаполнение корректно работает с #url текстовым полем в каждом текстовом поле, которое я создаю, однако я не могу заставить его работать с полем цены.

Это работает, только если nextUrlId не увеличивается каждый раз, когда я нажимаю «Добавить» (без nextUrlId ). Из-за этого я не могу автоматически заполнить поле цены при выборе из автозаполнения.

Это не работает:

     $('#AddUrl').click(function(){
        $('<p />').attr('id', 'urlParagraph'   nextUrlId)
                  .text("URL: ")
                  .appendTo('#inputBoxes');
        $( "#url" nextUrlId ).catcomplete({
         delay: 0,
         minLength : 2,
         source: "searchsku.php",
           select: function(event, ui){
           $("#price" nextUrlId).val(ui.item.price)}
    });
    NextUrlId  
 

HTML:

 <div id="inputBoxes">
   <table border="1">
       <tr>
         <td><p id="nameParagraph">Name: <input type="text" id="name" /></p>    </td>
       </tr>
       <tr>
         <td><p id="urlParagraph1">URL: <input type="text" id="url1" /></p> </td>
       </tr>
    </table>        
</div>
 

Если я правильно понял, у вас есть два связанных поля для каждого URL. Один с полем автозаполнения, а другой с ценой. В зависимости от записи автозаполнения поле цены должно изменять значение. Я не тестировал это, но я считаю, что что-то подобное должно работать хорошо. Вместо того, чтобы отслеживать идентификаторы, вы просто смотрите на дочерний элемент поля автозаполнения. Много способов сделать это, два примера ниже, в предпочтительном порядке.

 <div id="inputBoxes">
  <p class="inputbox">
    <input type="text" class="autocompleter" name="autocompleter[]">
    <input type="text" name="price[]" class="price">
  </p>
  <input type="button" value="Add" id="addURL">
</div>
 

Решение 1

 $(".inputbox").find(".autocompleter").catcomplete({
  delay: 0,
  minLength : 2,
  source: "searchsku.php",
  select: function(event, ui){
    $(this).siblings(".price").val(ui.item.price);
  }
});
 

 $("#addURL").bind("click",function(){
  var last = $(".inputbox").last();
  var newItem = last.clone()
  newItem.insertAfter(last);
  newItem.find(".autocompleter").catcomplete({
    delay: 0,
    minLength : 2,
    source: "searchsku.php",
    select: function(event, ui){
      $(this).siblings(".price").val(ui.item.price);
    }
  });
});
 

Решение 2

Если вы предпочитаете фиксированную связь между полем автозаполнения и полями цены в каждом абзаце, я бы сделал что-то вроде этого.

 <div id="inputBoxes">
  <p class="inputbox">
    <input type="text" rel="1" class="autocompleter" name="autocompleter[]">
    <input type="text" rel="1" name="price[]" class="price">
  </p>
  <input type="button" value="Add" id="addURL">
</div>
 

 $(".inputbox").find(".autocompleter").catcomplete({
  delay: 0,
  minLength : 2,
  source: "searchsku.php",
  select: function(event, ui){
    $('.price[rel="' $(this).attr("rel") '"]').val(ui.item.price);
  }
});
 

 $("#addURL").bind("click",function(){
  var last = $(".inputbox").last();
  var newItem = last.clone()
  newItem.insertAfter(last);
  var lastRel = last.find(".autocompleter").attr("rel");
  newItem.find(".autocompleter").attr("rel",lastRel 1);
  newItem.find(".price").attr("rel",lastRel 1);

  newItem.find(".autocompleter").catcomplete({
    delay: 0,
    minLength : 2,
    source: "searchsku.php",
    select: function(event, ui){
      $('.price[rel="' $(this).attr("rel") '"]').val(ui.item.price);
    }
  });
});