php - 如何在文档准备好后创建元素的 jquery ui 自动完成？

Question

我有一个主要的搜索输入字段，它是用 index.php 编写的：

<div class="row ">
    <input class="col-10 col-md-10 form-control form-control-sm w-8"
        type="text" name="tag_search" id="tag-search" value="" placeholder="Search..." >
    <button class="col-2 col-md-2 btn btn-search" type="button" onclick="searchFunc()" ><i class="fa fa-search"></i></button>
    <div id="suggestions"></div>
</div>

并且自动完成适用于它，但我有另一个输入是在显示图像时创建的，它建议向它添加一个标签，它们都有相同的自动完成功能，（标识符不同）但它不适用于后者。我怀疑是因为它是动态创建的。

$( function() {
    $( "#tag-search" ).autocomplete({
        appendTo: "#suggestions",
        source: function( request, response ) {
        $.ajax( {
          url: "/includes/autocomplete.php",
          dataType: "json",
          data: {
            term: request.term
          },
        success: function( data ) {
           response( data );
         }
       } );
    },
    minLength: 2,
    select: function( event, ui ) {
    }
  } );
} );

第二个元素：

 <input type="text" class="form-control"  id="add-tag-name" placeholder="Add Tag...">
<button type="button" class="btn btn-primary "
  title="Add Tag" id="plusbutton" onclick="addTagFunc()"><i class="fa fa-plus"></i>
</button>
<div id="tagsuggestions"></div>

第二个功能：

$( function() {
$( "#add-tag-name" ).autocomplete({
  appendTo: "#tagsuggestions",
  source: function( request, response ) {
    $.ajax( {
      url: "/includes/autocomplete.php",
      dataType: "json",
      data: {
        term: request.term
      },
      success: function( data ) {
        response( data );
      }
    } );
  },
  minLength: 2,
  select: function( event, ui ) {
  }
} );
} );

标签： phpjqueryjquery-uiautocomplete