如何在动态添加/删除字段中集成AutoComplete jQuery

Question

我创建了一个动态添加/删除字段。该代码运行正常。我想在其中添加以下自动完成的jQuery ...

<?php

$users = get_users();
$get_user_name = wp_list_pluck( $users, 'user_login' );

?>

<script>

jQuery(document).ready(function($) {                                
var availableTags = <?php echo json_encode($get_user_name); ?>;
$( "#user-login" ).autocomplete({
source: availableTags
});
});

</script>

我无法将以上代码与以下代码合并。同样，第一个字段为只读。因此，自动填充功能应从第二个字段开始。

<div class="panel panel-default">

  <div class="panel-heading"><center><b>Team Members</b></center></div>

  <div class="panel-body">

    <div class="row">

      <div class="col-md-8"><label>Member Username</label></div>
      <div class="col-md-2"></div>

    </div>

    <div class="row">

      <div class="col-md-8">

        <div class="form-group">

          <input type="text" class="form-control" name="user_login[]" placeholder="" readonly>

        </div>

      </div>

      <div class="col-md-2">

        <button type="button" class="btn btn-success" id="add-username-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add</button>

      </div>

    </div>

    <div id="username-fields">

    </div>

  </div>

</div>

<script type="text/javascript">

  var i = 0;

  jQuery(document).ready(function($) {

    //fadeout selected item and remove
    $(document).on('click', '#remove-username-fields', function(event) {

      event.preventDefault();
      $(this).parent().fadeOut(300, function() {
        $(this).parent().empty();
        return false;

      });

    });

    var rows = '<div class="user-fields"><div class="row"><div class="col-md-8"><div class="form-group"><input type="text" class="form-control" name="user_login[]" id="user-login" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove-username-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>';

    //add input
    $('#add-username-fields').click(function() {

      $(rows).fadeIn("slow").appendTo('#username-fields');
      i++;
      return false;

    });

  });

</script>

请帮帮我...