使用自动补全的动态元素 - Using autocomplete with on the fly elements

Using autocomplete with on the fly elements

本文关键字：动态元素 | 更新日期: 2023-09-27

我在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都有两个相关的字段。一个有自动补全框，一个有价格。根据自动完成输入，价格框应该改变值。我还没有测试过这个，但我相信这样的东西应该工作得很好。您无需跟踪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);
    }
  });
});