使用自动完成功能

Question

我有一个嵌套在jquery中的自动完成功能，可以动态创建文本元素。自动完成功能在我创建的每个文本字段的#url文本字段上正常工作，但是，我无法在价格字段上使用它。

仅当nextUrlId每次按下＆＃34;添加＆＃34; （没有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>

Answer 1

如果我做对了，每个网址都有两个相关字段。一个有自动完成框，一个有价格。根据自动填充条目，价格框应更改值。我没有对此进行过测试，但我相信这样的事情应该会有效。您只需查看自动填充字段的兄弟元素，而不是跟踪ID。这样做的方法很多，下面两个例子，按优先顺序排列。

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