AutoComplete未显示在预生成的“动态添加/删除”字段中

Question

我创建了一个动态添加/删除字段。第一个字段具有自动完成选项。一切正常。但是有一个问题。当我们添加字段时，自动完成功能工作正常，但由于每次插入的值而导致创建的字段中无法正常工作。

以下是我的代码...

<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-5"><label>Member's Username</label></div>
      <div class="col-md-5"><label>Role in Project</label></div>
      <div class="col-md-2"></div>

    </div>

<?php

$project_id = $_SESSION['project_id']; global $wpdb; $member_details = $wpdb->get_results( $wpdb->prepare( "SELECT * FROM {$wpdb->prefix}_project_members WHERE project_id = %d", $project_id ) );

foreach ( $member_details as $member_detail ) 
{
    $member_username[] = $member_detail->user_name;
    $member_role[] = $member_detail->user_role;
    $member_status[] = $member_detail->status;
}

?>

    <div class="row">

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

        <div class="form-group">

          <input type="text" class="form-control" name="user_login[]" value="<?php if ( $member_username[0] != '' ) echo esc_attr( $member_username[0] ); ?>" placeholder="" readonly="readonly">

        </div>

      </div>

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

        <div class="form-group">

          <input type="text" class="form-control" name="user_role[]" value="<?php if ( $member_role[0] != '' ) echo esc_attr( $member_role[0] ); ?>" placeholder="">
          <input type="hidden" class="form-control" name="status[]" value="<?php if ( $member_status[0] != '' ) echo esc_attr( $member_status[0] ); ?>" placeholder="">

        </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">

<?php $count_usernames = count( $member_username );

for ( $i = 1; $i < $count_usernames; $i++ ) { ?>

<div id="user-fields">

    <div class="row">

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

        <div class="form-group">

          <input type="text" class="form-control" id="user_login" name="user_login[]" value="<?php if ( $member_username[$i] != '' ) echo esc_attr( $member_username[$i] ); ?>" placeholder="">

        </div>

      </div>

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

        <div class="form-group">

          <input type="text" class="form-control" name="user_role[]" value="<?php if ( $member_role[$i] != '' ) echo esc_attr( $member_role[$i] ); ?>" placeholder="">
          <input type="hidden" class="form-control" name="status[]" value="<?php if ( $member_status[$i] != '' ) echo esc_attr( $member_status[$i] ); ?>" placeholder="">

        </div>

      </div>

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

        <button type="button" class="btn btn-danger" id="remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button>

      </div>

    </div>

</div> 

<?php } ?>

</div>

<p class="help-block"><i>To add member please register new User, if already not registered.</i></p>

  </div>

</div>    

<script>

jQuery(document).ready(function($) {
  var wrapper = $("#username-fields");
  var add_button = $("#add-username-fields");

  var x = 1;
  var availableAttributes = [
          "John",
          "Pamela",
          "Rogers",
          "Peter"
        ];
  var previousValue="";

  add_button.click(function(e) {
    e.preventDefault();
    x++;
    var element = $('<div id="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" id="user_login" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_role[]" placeholder=""><input type="hidden" class="form-control" name="status[]" value="Unverified" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');

    element.fadeIn("slow").find("input[name^='user_login']").autocomplete({
    autoFocus: true,
      source: availableAttributes,
    });
    wrapper.append(element);

  });

  wrapper.on("keyup","#user_login",function() {
    var isValid = false;
    for (i in availableAttributes) {
        if (availableAttributes[i].toLowerCase().match(this.value.toLowerCase())) {
            isValid = true;
        }
    }
    if (!isValid) {
        this.value = previousValue
    } else {
        previousValue = this.value;
    }

});

  wrapper.on("click", "#remove_field", function(e) {
    e.preventDefault();
    $(this).parent().fadeOut(300, function() {
      $(this).closest('#user-fields').remove();
      x--;
    });
  });
});

</script>

请帮助我解决我的问题...谢谢...

Answer 1

不得有任何重复的ID，例如 user-fields 和 remove_field ，您可以使用类名代替ID。

我已经为您修改了JS和HTML代码，并替换了id="user-fields" to class="user-fields"

请尝试以下代码。

jQuery(document).ready(function($) {
  var wrapper = $("#username-fields");
  var add_button = $("#add-username-fields");

  var x = 1;
  var availableAttributes = [
          "John",
          "Pamela",
          "Rogers",
          "Peter"
        ];
  var previousValue="";

  $(".user_login").autocomplete({
		autoFocus: true,
		source: availableAttributes,
    });
	
  $(".user_login").keyup(function(){
		var isValid = false;
		for (i in availableAttributes) {
			if (availableAttributes[i].toLowerCase().match(this.value.toLowerCase())) {
				isValid = true;
			}
		}
		if (!isValid) {
			this.value = previousValue
		} else {
			previousValue = this.value;
		}
  });
  
 	
  add_button.click(function(e) {
    e.preventDefault();
    x++;
    var element = $('<div class="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control user_login"  name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_role[]" placeholder=""><input type="hidden" class="form-control" name="status[]" value="Unverified" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger remove_field" ><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');

    element.fadeIn("slow").find("input[name^='user_login']").autocomplete({
		autoFocus: true,
       source: availableAttributes,
    });
    wrapper.append(element);

  });

  wrapper.on("click", ".remove_field", function(e) {
    e.preventDefault();
    $(this).parent().fadeOut(300, function() {
      $(this).closest('.user-fields').remove();
      x--;
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></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-5"><label>Member's Username</label></div>
      <div class="col-md-5"><label>Role in Project</label></div>
      <div class="col-md-2"></div>

    </div>



    <div class="row">

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

        <div class="form-group">

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

        </div>

      </div>

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

        <div class="form-group">

          <input type="text" class="form-control" name="user_role[]" value="" placeholder="">
          <input type="hidden" class="form-control" name="status[]" value="" placeholder="">

        </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">

	<!-- php code start
	
		<php $count_usernames = count( $member_username );

		for ( $i = 1; $i < $count_usernames; $i++ ) { >
	
	-->

	<div class="user-fields">

		<div class="row">

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

			<div class="form-group">

			  <input type="text" class="form-control user_login" name="user_login[]" value="10" placeholder="user login">

			</div>

		  </div>

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

			<div class="form-group">

			  <input type="text" class="form-control" name="user_role[]" value="super" placeholder="">
			  <input type="hidden" class="form-control" name="status[]" value="active" placeholder="">

			</div>

		  </div>

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

			<button type="button" class="btn btn-danger remove_field" ><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button>

		  </div>

		</div>

	</div> 

	<!-- php code end
	
		< php } ?>
	-->

</div>

<p class="help-block"><i>To add member please register new User, if already not registered.</i></p>

  </div>

</div>